Different options in listbox depending on radio buttons.

Kunda · Mar 12, 2002

How is it possible using javascript to make the options in a dropdown select list dependant on radio buttons?
I'd like only the neuter and vasectomy methods to appear when the radio button for "male" is selected, and only the spay and tubal ligation methods to appear when "female" is selected.
I currently have them all in the one box, it's all within <pre></pre> tags.

<b>GENDER</b> <input type=radio name=gender value=male>Male <input type=radio name=gender value=female>Female
<b>DESEXED</b> <input type=radio name=desexed value=no>No <input type=radio name=desexed value=yes>Yes <select name="method"><option selected value="">- Which Method? -<option value="Castration">Castration (Neutered)<option value="Vasectomy">Vasectomy<option value="Ovariohysterectomy">Ovariohysterectomy (Spayed)<option value="Tubal Ligation">Tubal Ligation</select>

I was also wondering if the dropdown list could start as invisible and appear only when "Yes" radio button for "Desexed" is clicked, and how I could make it so the "Yes" button wouldn't work until either "male" or "female" was selected as the gender. Thanx in advance.

spewn · Mar 12, 2002

here is a thread that details a script to do just that...

Thread216-214085

what do you think?

- spewn

Kunda · Mar 13, 2002

Thanks for that, I got it exactly how I wanted it!
trying to get <span> working inside the <pre> tags without adding an extra line meant a bit of fiddling and duplication though:

<head><script language=Javascript>
function Male() {
var IntPath = document.k9.method;
document.k9.method.length = 0;
IntPath[IntPath.length] = new Option('Castration (Neutered)','0');
IntPath[IntPath.length] = new Option('Vasectomy','1');
}
function Female() {
var IntPath = document.k9.method;
document.k9.method.length = 0;
IntPath[IntPath.length] = new Option('Ovariohysterectomy (Spayed)','0');
IntPath[IntPath.length] = new Option('Tubal Ligation','1');
}
function IsDesexed() {
document.all['nds'].style.display='none';
document.all['ds'].style.display='block';
timerOne=window.setTimeout("document.k9.desexed[1].checked=true",1);
}
function NotDesexed() {
document.all['ds'].style.display='none';
document.all['nds'].style.display='block';
timerOne=window.setTimeout("document.k9.desexed[2].checked=true",1);
}
</script></head>
<body><form name="K9"><pre>
<b>GENDER</b> <input type=radio name=gender value=male onClick="Male()">Male <input type=radio name=gender value=female onClick="Female()">Female
<span id="ds" STYLE="display:none"><b>DESEXED</b> <input type=radio name=desexed value=no onClick="NotDesexed()">No <input type=radio name=desexed value=yes>Yes <b>METHOD:</b><select name="method"><option value="">- Select a Gender! -</select></span><span id="nds" STYLE="display:block"><b>DESEXED</b> <input type=radio name=desexed value=no>No <input type=radio name=desexed value=yes onClick="IsDesexed()">Yes</span>
</pre></form></body>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Different options in listbox depending on radio buttons.

Kunda

Technical User

spewn

Programmer

Kunda

Technical User

Similar threads

Part and Inventory Search

Sponsor