I have dropdownlist box and two radiobuttons If i check first radiobutton, 1,2,3 vil be added to dropdownlistbox. If i select second radiobutton, 4, 5,6 will be added t dropdownlistbox. All these are created using java script.Here my problem is, Ididt select the drpdownlist values when i select any radiobutton
Please help me
Going under the assumption that you want to alternate values in the select list (as opposed to letting it grow perpetually), here is a very simple/brute-force way to do it. There are certainly more elegant solutions but this should help you understand the basic mechanics of select list manipulation.
I tested this in both FF3.5 and IE8.
<html>
<head>
<script type="text/javascript">
function buildList(selectedRadio){
if(document.mylist){
thelist=document.mylist;
} else {
thelist=document.getElementById('mylist');
}
thelist.options.length=0;
if( selectedRadio=="123" ){
thelist.options.add(new Option("1",1));
thelist.options.add(new Option("2",2));
thelist.options.add(new Option("3",3));
} else {
thelist.options.add(new Option("4",4));
thelist.options.add(new Option("5",5));
thelist.options.add(new Option("6",6));
}
}
function changeSelectList(){
var selectedRadio;
var radios=document.forms[0].chooseOptions;
for( var i=0; i<radios.length; i++ ){
if( radios[i].checked ){
selectedRadio=radios[i].value;
break;
}
}
buildList(selectedRadio);
}
</script>
</head>
<body>
Which options do you want?<br/>
<form name="myform">
1,2,3 <input onclick="changeSelectList();" type="radio" name="chooseOptions" value="123" CHECKED/><br/>
4,5,6 <input onclick="changeSelectList();" type="radio" name="chooseOptions" value="456" /><br/>
<select id="mylist" name="mylist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</html>