how to change the select list box according to the radio button selects

Question

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.

Answer 1

Here my sample, you should modify it as yours:

<div>
    <input type="radio" name="rdo" id="rdo1" value="list1" />Radio1
    <select id="select1" style='display:none;'>
        <option value="l1">list1-1</option>
        <option value="l2">list1-2</option>
    </select>
</div>
<div>
    <input type="radio" name="rdo" id="rdo2" checked="checked" value="list2"/>Radio2
    <select id="select2">
        <option value="l1">list2-1</option>
        <option value="l2">list2-2</option>
    </select>
</div>

<script>
function select1() {
    document.getElementById("select1").style.display="block";
    document.getElementById("select2").style.display="none";   
}

function select2() {
 document.getElementById("select2").style.display="block";
document.getElementById("select1").style.display="none";             
}    


document.getElementById("rdo1").onclick = select1;
document.getElementById("rdo2").onclick = select2;
</script>

on jsfiddle: http://jsfiddle.net/u8Tvq/

Answer 2

here I am putting code with jQuery, you can do this with core javascript also. I am coding based on the assumption you have same name for both the radio button and you have put your listboxes inside div. make sure to have same class for both divs

<input type="radio" name="rdo" value="val1" />
<input type="radio" name="rdo" value="val2" />

<div id="val1_list" class="dummyclass">
<select ></select>
</div>
<div id="val2_list" class="dummyclass">
<select ></select>
</div>

$(function() {
    $("[name=rdo]").click(function (){
        $(".dummyclass").hide();// make sure both the div have same class name 
        $("#"+ $(this).val()+"_list").show();
    });
});

Answer 3

First create a CSS code that will hide the dropdown. We will just show the drop down if the corresponding radio is clicked.

<style>
.dropDown { display:none; }
</style>

then Create the radio and the dropdown.

<input type="radio" value="drop1" class="radioSelect"> First Drop Down<br>
<input type="radio" value="drop2" class="radioSelect"> Sencond Drop Down<br>

<select name="drop1" class="dropDown">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="drop2" class="dropDown">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Notice that the value of the radio is the same as the name of the dropdown, so you can manage it easily on jquery

Now this will be the js code:

<script type="text/javascript">
$(".radioSelect").click(function() {
    $(".dropDown").hide();
    $("[name='"+$(this).val()+"'").show();
    return false;
});
</script>