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
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts

    populating dropdown

    I have 3 radio buttons named "search" "browse" "exact match" and one dropdown. The dropdown menu will have "Title" "author" "ISBN" "keyword".

    If the user selects the "search" radio button, then only the "Keyword" should appear in the dropdown.
    If the user selects "browse" in the radio button then "author" and "Title" should appear in the drop down menu.
    If the user selects "exact match" from the radio button then "ISBN" should appear in the dropdown menu.

    How can I do this with the javascript?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is an example that I wrote a long time ago. It probably coud be done more efficiently.
    <html>
    <head>
    <title>Dropdown create</title>
    <script language="JavaScript">
    NS = document.layers? 1:0;
    function populate()
    {
    if(document.myform.chk[0].checked)
    {
    document.myform.selectTest2.length=3
    option0=new Option("Barn Red", "Barn Red", true, true)
    option1=new Option("Dark Red", "Dark Red")
    option2=new Option("Light Red", "Light Red")
    }
    if(document.myform.chk[1].checked)
    {
    document.myform.selectTest2.length=2
    option0=new Option("Dark Green", "Dark Green", true, true)
    option1=new Option("Light Green", "Light Green")
    }
    var num=document.myform.selectTest2.length

    for (var i=0; i<num; i++)
    {
    eval("document.myform.selectTest2.options[i]=option"+i)
    }
    if (NS)
    {
    history.go(0)
    }
    }
    </script>
    <body>
    <form name="myform">
    <input type="radio" name="chk" onClick="populate()">Option A
    <input type="radio" name="chk" onClick="populate()">Option B
    <br>
    <select name="selectTest2" size="1"></select>
    </form>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for sharing the code. But unfortunately I have to populate 3 dropdowns with each radio click with the same values.

    I wrote for 2 dropdowns but I am getting an error like "object method is not supported". Can some one help me?

    <html>
    <head>
    <title>Dropdown create</title>
    <script language="JavaScript">
    NS = document.layers? 1:0;
    function populate()
    {
    if(document.myform.chk[0].checked)
    {
    document.myform.selectTest2.length=3
    document.myform.test2.length=3
    option0=new Option("Title", "Title", true, true)
    option1=new Option("Dark Red", "Dark Red")
    option2=new Option("Light Red", "Light Red")
    }
    if(document.myform.chk[1].checked)
    {
    document.myform.selectTest2.length=2
    document.myform.test2.length=2
    option0=new Option("Dark Green", "Dark Green", true, true)
    option1=new Option("Light Green", "Light Green")
    }
    if(document.myform.chk[2].checked)
    {
    document.myform.selectTest2.length=2
    document.myform.test2.length=2
    option0=new Option("ISBN", "ISBN", true, true)
    option1=new Option("Author", "Author")
    }

    var num=document.myform.selectTest2.length


    for (var i=0; i<num; i++)
    {
    eval("document.myform.selectTest2.options[i]=option"+i)
    }
    var num=document.myform.test2.length
    for (var i=0; i<num1; i++)
    {
    eval("document.myform.test2.options[i]=option"+i)
    }

    }
    </script>
    <body onload="populate()">
    <form name="myform">
    <select name="selectTest2" size="1"></select>
    <br><br>
    <select name="test2" size="1"></select>
    <br><br>
    <input type="radio" name="chk" checked onClick="populate()">Option A
    <input type="radio" name="chk" onClick="populate()">Option B
    <input type="radio" name="chk" onClick="populate()">Option C
    <br>

    </form>
    </body>
    </html>


  •  

    Posting Permissions

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