Develop Reference

Hidden optgroup dynamically after choice

I have 2 optgroup in my select list (category and subcategory)
and i am trying to show optgroup and hide other on selection of subcategory.
for example if I choose in the category (sport, music)
in the subcategory I display only the sport and music
I tried with the following code but it doesn't work
Thanks
$("#custom_form_names_category").on("change", function() {
var selectedVal = $(this).find("option:selected").text();
console.log(selectedVal);
$('#custom_form_names_subcategorie > [aria-label="' + selectedVal + '"]')
.show()
.siblings("optgroup")
.css("display", "none");
});
$(".js-select2").select2({
closeOnSelect: false,
allowClear: true,
tags: true,
dropdownCssClass: "beforecheckbox"
});
.select2.select2-container {
width: 100% !important;
}
.select2-container .select2-selection__rendered {
padding: 5px 15px 0 15px;
text-transform: uppercase;
font-size: 13px;
box-shadow: none;
background-image: none;
text-transform: uppercase;
font-size: 13px;
}
.select2-container .select2-selection--single {
height: 100% !important;
border-radius: 15px !important;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
color: #fff;
background: url(../images/svg/check_active.png);
border: 0;
display: inline-block;
padding-left: 3px;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=false]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
border: #b7b9cc solid 2px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
background: red;
}
#custom_form_names_category {
margin-bottom: 50px !important;
}
.select2.select2-container {
margin-bottom: 50px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select id="custom_form_names_category" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="25">Sport</option>
<option value="17" data-select2-id="26">Volley</option>
<option value="18" data-select2-id="27">Musci</option>
<option value="29" data-select2-id="28">film</option>
<option value="35" data-select2-id="29">Englich</option>
</select>
<select id="custom_form_names_subcategorie" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible">
<optgroup label="Sport" data-select2-id="33">
<option value="2" data-select2-id="34">Dance </option>
</optgroup>
<optgroup label="Musci" data-select2-id="35">
<option value="3" data-select2-id="36">Catégorie 4</option>
<option value="4" data-select2-id="37">Rap</option>
</optgroup>
<optgroup label="Volley" data-select2-id="38">
<option value="5" data-select2-id="39">Catégorie 4</option>
</optgroup>
<optgroup label="film" data-select2-id="40">
<option value="7" data-select2-id="41">Catégorie 5</option>
</optgroup>
</select>

You cannot interact with the option groups, You can only disable them, but with the rendered result of select2.
test:
$('#custom_form_names_subcategorie').on('select2:open', function (e) {
//var first = $('#custom_form_names_category').find(':selected');
//console.log(first);
setTimeout(function(){
$('[aria-label]').hide();
$('#custom_form_names_category').find(':selected').each(function( index ) {
var selected = $( this ).text();
console.log( index + ": " + selected );
$('[aria-label="' + selected + '"]').show();
console.log($('[aria-label="' + selected + '"]'));
});
},100);
//$('[aria-label="' + selectedVal + '"]').show().siblings("li").css('display', 'none');
});
This also works when you select more than one. I had to put a setTimeout because in the on open event, of the version of select2 you used, in reality the select is not yet drawn. try to change version. However this works.
Alternatively you should fill the second select dynamically as defined in this link:
Add, select, or clear items

get text inside element, if element contains select get selected option

Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!

Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>

javascript won't appear on html

I have been trying to make an etch a sketch for days now. I cannot find what to try next as I am a brand new web development student. I have put console logs in and haven't found any errors in the dev tools.
I have tried breaking down other files to run only one function at a time and somehow my addEventListeners aren't working as they should be. A little nudge in the right direction would help alot.
<!DOCTYPE html>
<html>
<head>
//<link rel="stylesheet" type="text/css" href="etchASketch.css">
<style>
* {
background-color: aqua;
font-size: 16px;
}
#headers {
height: 25%;
position:relative;
}
h1 {
font-size: 2em;
font-family: cursive;
color: blue;
text-align: center;
margin: auto;
padding-bottom: 10px;
}
#instructions {
text-align: center;
font-size: 1.5em;
font-family: cursive;
margin: auto;
padding-bottom: 15px;
}
#moreInstructions {
text-align: center;
font-family: cursive;
font-size: 1.25em;
width: 60%;
margin: auto;
padding-top: 15px;
}
#colorOptions {
position: absolute;
height: 45px;
width: 125px;
color: blue;
text-align: center;
font-family: cursive;
font-size: 1.25em;
cursor: pointer;
border-radius: 20%;
left: 25px;
background-color: pink;
}
#btns {
float: right;
height: 200px;
display:flex;
flex-direction: column;
justify-content: space-between;
margin-right: 30px;
}
.radio {
height: 25px;
width: 50px;
border-radius: 15%;
margin: 15px;
padding: 10px;
display: inline-block;
float: right;
font-family: cursive;
font-size:1em;
}
#sliderContainer {
margin: auto;
height: 75px;
width: 400px;
font-family: cursive;
text-align: center;
color: blue;
background-color: turquoise;
}
#mySlider {
margin: auto;
}
.grid {
bottom: 0;
height: 60%;
width: 70%;
margin: auto;
border: 2px solid black;
background-color: white;
}
.radio :active {
background-color: grey;
}
</style>
</head>
<body>
<div id="headers">
<h1 id="heading">Etch-A-Sketch</h1>
<h3 id="instructions">Choose a color and set the slider on the size of grid you prefer</h3>
<p id="moreInstructions">Move cursor over the grid to draw your masterpiece. If you make a mistake, just hit "Erase"
then move cursor over unwanted squares. Click "Draw" to continue drawing. Click "Clear Grid" to clear grid
entirely and begin a new drawing.</p>
</div>
<select id="colorOptions">
<option value"colorChoices" selected>Colors</option>
<option value"red">Red</option>
<option value"pink">Pink</option>
<option value"blue">Blue</option>
<option value"green">Green</option>
<option value"purple">Purple</option>
<option value"black">Black</option>
</select>
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>
<div class="size">Size = <span class="out"> </span>
<input type="range" class="slider" id="myRange" min="1" max="64" value="16">
<div class="grid"></div>
<script>
let size = 16;
let color = 'black';
var slider = document.getElementById('myRange');
var output = document.querySelector('.out');
var clearGrid = document.getElementById('clearGrid');
let drawButton = document.getElementById('draw');
let eraseButton = document.getElementById('erase');
let select = document.getElementById('colorOptions');
let colorChoice = document.getElementById('colorOptions').value;
select.onchange = function() {
let color = this.value;
}
drawButton.onclick = function() {
if (this.checked == true && eraseButton.checked == false) color = color;
}
eraseButton.onclick = function() {
if (this.checked == true) color = 'white';
else if (this.checked == false)
color = color;
}
function hoverFunc(e) {
if (eraseButton.checked == true) {
this.style.backgroundColor = 'white';
} else if (drawButton.checked == true) {
this.style.backgroundColor = color;
}
}
slider.onchange = function() {
output.innerHTML = this.value;
size = this.value;
buildBoard(this.value);
}
function buildBoard(size) {
let grid = document.querySelector(".grid");
grid.style.gridTemplateRows = `repeat (${size}, 1fr)`;
grid.style.gridTemplateColumns = `repeat (${size}, 1fr)`;
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
let square = document.createElement('div');
square.classList.add('cell');
square.addEventListener('mouseover', hoverFunc);
grid.appendChild(square);
}
}
}
clearGrid.addEventListener('click', clearBoard);
function clearBoard() {
let cell = document.querySelectorAll('.cell');
cell.forEach(x => x.remove());
}
function hoverFunc(e) {
if (eraseButton.checked == true) {
this.style.backgroundColor = 'white';
} else if (drawButton.checked == true) {
this.style.backgroundColor = select.value;
}
}
buildBoard(size);
</script>
</body>
</html>

Problem 1:
<select id="colorOptions">
<option value"colorChoices" selected>Colors</option>
<option value"red">Red</option>
<option value"pink">Pink</option>
<option value"blue">Blue</option>
<option value"green">Green</option>
<option value"purple">Purple</option>
<option value"black">Black</option>
</select>
Solution:
<select id="colorOptions">
<option value="colorChoices" selected>Colors</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
<option value="black">Black</option>
</select>
Problem 2:
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>
Solution:
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" name="xyz" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" name="xyz" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" name="xyz" id="clearGrid" class="radio">
</div>
Give name attributes to all the radio buttons and their values should be same
The grid is not having any height.
Change it using inline css.
For all the variables just after the script tag change all the let to var

HTML/CSS Can't get form and buttons to work properly [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
For a school assignment I have to create a "Doughnut/Coffee Shop", in which I used HTML and CSS, but I can't seem to get my "Calculate Totals" and "Reset Form" buttons for my form to work.
Sorry for formatting but here is my HTML:
http://pastebin.com/raw.php?i=xJ8SkqQ4
And my CSS:
http://pastebin.com/raw.php?i=zZbpt61Y
If anyone could find my error(s) I'd greatly appreciate it.
Edit: Such a stupid mistake, I forgot my id on my select dropdown bar. Thank you again Austin Greco!

You were just missing the id on the doughnut select:
<select id="DoughnutChoiceField">
If you use the chrome/ff debugger, you can debug and see the element is null, which means document.getElementById failed to find the id.
function ResetForm()
{
document.getElementById("OrderForm").reset();
}
function ValidateNumber(value)
{//We need to ensure that what you entered is a valid number
if (isNaN(value))
alert("What you entered is not a number. You entered a " + value +".")
}
function PlaceOrder()
{
const TAXRATE = 0.087;
// Coffee blend constant prices
const HOUSEBLENDPRICE = 8.00;
const KENYAPRICE = 9.50;
const BOURBONPRICE = 12.00;
const NOBLENDPRICE = 0.00;
// Coffee size constant prices
const SMALLSIZEPRICE = 0.50;
const MEDIUMSIZEPRICE = 0.75;
const LARGESIZEPRICE = 1.00;
const NOSIZEPRICE = 0.00;
// Doughnut type constant prices
const GLAZEDDOUGHNUTPRICE = 1.00;
const CHOCOLATEDOUGHNUTPRICE = 1.50;
const MAPLEDOUGHNUTPRICE = 1.50;
const NOTYPEPRICE = 0.00;
// Coffee Amount
var NumberOfBags = parseInt(document.getElementById("NoBagsField").value);
if (isNaN(NumberOfBags))
{// if no entry, then set it to zero in the form
NumberOfBags = 0;
document.getElementById("NoBagsField").value = 0;
}
// Coffee Blend
var BeanChoice = document.getElementById("CoffeeBlendField");
var Blend = BeanChoice.options[BeanChoice.selectedIndex].value;
if (Blend == "HouseBlend")
{BeanPrice = HOUSEBLENDPRICE;}
if (Blend == "KenianBlend")
{BeanPrice = KENYAPRICE;}
if (Blend == "BourbonBlend")
{BeanPrice = BOURBONPRICE;}
if (Blend == "NoBlend")
{BeanPrice = NOBLENDPRICE;}
// Price for Coffee Size
var SizeChoice = document.getElementById("SizeChoiceField");
var Size = SizeChoice.options[SizeChoice.selectedIndex].value;
if (Size == "SmallSize")
{SizePrice = SMALLSIZEPRICE;}
if (Size == "MediumSize")
{SizePrice = MEDIUMSIZEPRICE;}
if (Size == "LargeSize")
{SizePrice = LARGESIZEPRICE;}
if (Size == "NoSize")
{SizePrice = NOSIZEPRICE;}
// Type of Doughnut
var DoughnutChoice = document.getElementById("DoughnutChoiceField");
var Doughnut = DoughnutChoice.options[DoughnutChoice.selectedIndex].value;
if (Doughnut == "Glazed")
{DoughnutPrice = GLAZEDDOUGHNUTPRICE;}
if (Doughnut == "Chocolate")
{DoughnutPrice = CHOCOLATEDOUGHNUTPRICE;}
if (Doughnut == "Maple")
{DoughnutPrice = MAPLEDOUGHNUTPRICE;}
if (Doughnut == "NoDoughnut")
{DoughnutPrice = NOTYPEPRICE;}
// Doughnut Amount
var NumberOfDoughnuts = parseInt(document.getElementById("DoughnutAmountField").value);
if (isNaN(NumberOfDoughnuts))
{// if no entry, then set it to zero in the form
NumberOfDoughnuts = 0;
document.getElementById("DoughnutAmountField").value = 0;
}
// Pricing
var SubTotal = (((BeanPrice+SizePrice)*NumberOfBags) + ((DoughnutPrice)*NumberOfDoughnuts));
var SalesTax = SubTotal * TAXRATE;
var Total = SubTotal + SalesTax;
document.getElementById("SubTotalField").value = "$" + SubTotal.toFixed(2);
document.getElementById("SalesTaxField").value = "$" + SalesTax.toFixed(2);
document.getElementById("TotalField").value = "$" + Total.toFixed(2);
}
.body
{
}
.header
{
font-size: 25px;
top:10px;
left:100px;
width:900px;
height:150px;
border-style: solid;
border-color: #9A0E2A;
border-width: 5px;
display: table;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.header h1
{
color: #AE5AAB;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.flipimage
{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.MainBody
{
width: 800px;
padding: 0px;
}
.left
{
width: 250px;
height: 600px;
margin: 0px;
padding: 0px;
border-color: #9A0E2A;
border-style: solid;
border-width: 5px;
float: left;
text-align: center;
position: absolute;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.left img
{
position: absolute;
left: 0;
bottom: 0;
}
.left h1
{
color: DarkCyan;
text-align: left;
vertical-align: top;
font-size: 20px;
margin-top: 50px;
margin-left: 15px;
}
.left h2
{
color: DarkCyan;
text-align: left;
vertical-align: top;
font-size: 20px;
margin-left: 15px;
}
.left h3
{
color: White;
text-align: left;
vertical-align: top;
font-size: 15px;
margin-left: 15px;
}
.center
{
position: absolute;
width: 650px;
border-style: solid;
border-color: #9A0E2A;
border-width: 5px;
margin-left: 250px;
padding: 0px;
height: 600px;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.center h1
{
color: RoyalBlue;
text-align: center;
vertical-align: top;
line-height: 100px;
}
.center p
{
color: RoyalBlue;
text-indent:50px;
}
<div class="MainBody">
</div>
<div class="header">
<img src="doughnut3.png" align="left" width="300px" height="150px">
<h1>Doughnut Shop</h1>
<img src="doughnut3.png" align="right" class="flipimage" width="300px" height="150px">
</div>
<div class="left">
<h1 valign="top" align="left">Shop Address:</h1>
<h3 valign="top" align="left">12345 E. Main Street</h3>
<h2 valign="top" align="left">Phone:</h2>
<h3 valign="top" align="left">(509) 123-4567</h3>
<h2 valign="top" align="left">Email:</h2>
<h3 valign="top" align="left">doughnutshop#hotmail.com</h3>
<hr>
<img valign="bottom" src="doughnut.png" width="250px" height="175px">
</div>
<div class="center">
<h1>Order:</h1>
<p><b>Customer Name:</b>
<input type="text" name="state" value=""><br>
</p>
<p><b>Order Date:</b>
<input type="date" name="date">
</p>
<hr>
<form id="OrderForm">
<p><b>Coffee Blend</b>
<select id="CoffeeBlendField">
<option value="NoBlend" disabled selected style='display:none;'></option>
<option value="HouseBlend">House Blend</option>
<option value="KenianBlend">Kenian Blend</option>
<option value="BourbonBlend">Bourbon Blend</option>
</select>
</p>
<p><b>Coffee Size:</b>
<select id="SizeChoiceField">
<option value="NoSize" disabled selected style='display:none;'></option>
<option value="SmallSize">Small</option>
<option value="MediumSize">Medium</option>
<option value="LargeSize">Large</option>
</select>
</p>
<p><b>Quantity (1-20):</b>
<input type="text"
id="NoBagsField"
placeholder="#"
value=""
size = "1"
onblur="ValidateNumber(this.value)">
</p>
<hr>
<p><b>Doughnut Type:</b>
<select id="DoughnutChoiceField">
<option value="NoDoughnut" disabled selected style='display:none;'></option>
<option value="Glazed">Glazed</option>
<option value="Chocolate">Chocolate</option>
<option value="Maple">Maple</option>
</select>
</p>
<p><b>Quantity (1-20):</b>
<input type="text"
id="DoughnutAmountField"
placeholder="#"
value=""
size = "1"
onblur="ValidateNumber(this.value)">
</p>
<hr>
<p><b>SubTotal:</b>
<input type="text"
id="SubTotalField"
value="">
</p>
<p><b>SalesTax:</b>
<input type="text"
id="SalesTaxField"
value="">
</p>
<p><b>Total Sale:</b>
<input type="text"
id="TotalField"
value="">
</p>
</form>
<button onclick="PlaceOrder()">Calculate Totals</button>
<button onclick="ResetForm()">Reset</button>
</div>

Need list in drop down menu to display results after clicking numbers

I'm trying to figure out how to add the out to the text box underneath the female drop down box when you select in the Female section "80-140" in the text field it should read "Women use 5 Iron" why isn't that not displaying on the screen? Thanks! It is nearly impossible to find an on line tutorial that explains this. Hopefully I am explaining it right. If you run the code it'll make more sense. Again thanks!
<!DOCTYPE>
<meta name="keywords" content="CIS 122" />
<meta name="description" content="Examples of radio buttons, dropdown and function calls in JavaScript" />
<style type="text/css">
body{
background-color: #93BACB;
width: 800px;
border: 1px solid #004343;
margin: 25px auto;
padding: 25px 25px 10px 25px;
font-family: Times New Roman; serif;
}
h1{
font-size: 24px;
line-height: 26px;
color: #004343;
text-align: left;
margin: 10px 0 0 0;
}
h2{
font-size: 16px;
line-height: 18px;
color: black;
text-align: left;
}
h3{
font-size: 32px;
line-height: 32px;
color: black;
text-align: center;
margin: 0;
}
input{
margin-top: 3px;
}
.lessonBlock{
width: 400px;
border: 1px solid #004343;
margin: 25px auto 0;
padding: 0 10px 10px;
float: left;
}
ul{
margin: 0;
}
li{
list-style-type: none;
}
.clear{
clear: both;
}
</style>
<script language="javascript">
function getButtonChoice()
{
for(var index = 0; index < document.radioTest.fred.length; index++)
{
if(document.radioTest.fred[index].checked == true)
var radioChoice = document.radioTest.fred[index].value;
}
document.radioTest.displayRadio.value = radioChoice;
}
function getDropdownChoice()
{
document.radioTest.displayDrop.value = document.radioTest.dropChoices.value;
}
</script>
<body>
</div>
<div class="clear"></div>
<form name="radioTest">
<input type="radio" name="fred" value="Clubs" />Male<br />
<select name="dropChoices" onchange="getDropdownChoice();">Friend
<option></option>
<option value=" Men use 5 Iron">140-170</option>
<option value=" Men 6 Iron">130-160</option>
<option value="Men use 7 Iron">120-150</option>
// the code for the men drop down box works so just trying to figure out why the female section won't work.
</select><br />
<form name="radioTest">
<input type="radio" name="fred" value="Clubs" />Female<br />
<select name"dropChoices" onchange="getDropdownChoice();">Friend
<option></option>
<option value="Women use 5 Iron">80 - 140</option>
<option value="Women use 6 Iron">70- 130</option>
<option value="Women use 7 Iron">65 - 120</option>
//how do I display this inside the text box underneath the drop down box? I have the male one working.
<input type="text" name="displayDrop" />
<onclick="getButtonChoice();"
</form>
</div>
<div class="clear"></div>
</body>
</html>

I have corrected your HTML and JavaScript Code. Please take a look at the code portions given below. Replace your HTML and Script code with the ones given below. This code works fine as per your requirement.
HTML Code -
<body>
<div class="clear"></div>
<form name="radioTest">
<input type="radio" name="fred" id="fred_male" value="Clubs" />Male<br />
<select name="dropChoices_male" id="dropChoices_male" onchange="getDropdownChoice();">Friend
<option></option>
<option value=" Men use 5 Iron">140-170</option>
<option value=" Men 6 Iron">130-160</option>
<option value="Men use 7 Iron">120-150</option>
</select><br />
<form name="radioTest">
<input type="radio" name="fred" id="fred_female" value="Clubs" />Female<br />
<select name="dropChoices_female" id="dropChoices_female" onchange="getDropdownChoice();">Friend
<option></option>
<option value="Women use 5 Iron">80 - 140</option>
<option value="Women use 6 Iron">70- 130</option>
<option value="Women use 7 Iron">65 - 120</option>
</select><br />
<input type="text" name="displayDrop" onclick="getButtonChoice();" />
</form>
</div>
<div class="clear"></div>
</body>
JavaScript Code -
<script language="javascript">
var radioChoice;
function getDropdownChoice()
{
document.radioTest.displayDrop.value = '';
if(document.getElementById("fred_male").checked)
{
var e = document.getElementById("dropChoices_male");
radioChoice = e.options[e.selectedIndex].value;
}
else if(document.getElementById("fred_female").checked)
{
var e = document.getElementById("dropChoices_female");
radioChoice= e.options[e.selectedIndex].value;
}
else
{
radioChoice = '';
}
}
function getButtonChoice() {
document.radioTest.displayDrop.value = radioChoice;
}
</script>

Ok never mind I hit the text field with enter and it displays the answer is there a way to show it the answer just as text and not a text field? But this works.