Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    95
    Thanks
    8
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,173
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Here you are:-

    Code:
    <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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    95
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hey,

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •