...

View Full Version : how to change the select list box according to the radio button selects



Mythri
01-05-2012, 08:32 AM
I have two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user.
If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed.
How can i achieve this using javascript. Please somebody help me.

Philip M
01-05-2012, 09:32 AM
Here you are:-


<form name = "myform">

LIST 1 <input type = "radio" name = "rad1" value = "1" onclick = "showSelect()">
LIST 2 <input type = "radio" name = "rad1" value = "2" onclick = "showSelect()">
<br><br>
<div id = "L1" style="display:none">
<select id = "list1">
<option value = "0">Select an option ...</option>
<option value = "1">List 1 Option 1</option>
<option value = "2">List 1 Option 2</option>
<option value = "3">List 1 Option 3</option>
</select>
</div>
<div id = "L2" style="display:none">
<select id = "list2">
<option value = "0">Select an option ...</option>
<option value = "1">List 2 Option 1</option>
<option value = "2">List 2 Option 2</option>
<option value = "3">List 2 Option 3</option>
</select>
</div>

</form>

<script type = "text/javascript">
function showSelect() {
document.getElementById("L1").style.display="none";
document.getElementById("L2").style.display="none";
for (var i=0; i <2; i++) {
if (document.myform.rad1[i].checked) {
var val = document.myform.rad1[i].value;
}
if (val == 1) {
document.getElementById("L1").style.display="block";
}
if (val == 2) {
document.getElementById("L2").style.display="block";
}
}

}

</script>

"By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest;
and third by experience, which is the bitterest." - Confucious

Mythri
01-05-2012, 10:37 AM
Hey,

Thank you very very much. It worked for me.. Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum