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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts

    DDL element based on radio button group

    Hi i have 2 radios :

    what i need is once i choose the 1st radio i will get 1st DDL with folollwing element :

    Orange
    Apple
    Kiwi


    if i chose the 2nd radio i should have the 2nd DDL with :

    Potato
    Tomato
    legume

    ?

    thanks

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    use AJAX call for the same

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    thanks my friend wondering how we can do it using ajax ?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    There is *NO* reason to use AJAX for something this dirt simple.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var lists = [
        [ "Orange", "Apple", "Kiwi", "Watermelon", "Banana" ],
        [ "Potato", "Tomato", "Legume" ]
    ];
    
    function rbChoose( rb )
    {
        var sel = rb.form.TheList;
        sel.options.length = 0;
        var list = lists[ Number(rb.value) ];
        for ( var i = 0; i < list.length; ++i )
        {
            sel.options[i] = new Option( list[i], list[i] );
        }
    }
    </script>
    </head>
    <body>
    <form>
    Which food?
    <label><input type="radio" name="food" value="0" onclick="rbChoose(this);"/> Fruit</label>
    <label><input type="radio" name="food" value="1" onclick="rbChoose(this);"/> Vegetables</label>
    <br/>
    <select name="TheList">
    <option>--choose fruit or vegetable--</option>
    </select>
    </form>
    </body>
    </html>
    As you can see, you can have as many items in each list as you want.

    You can also have as many lists (and radio buttons) as you want.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Hi Old P.

    How come if i want to show those items in a display but assign different values to them in back end like :

    <option value="1" > Orange</option>
    <option value="2" > Apple</option>
    <option value="3" > Kiwi</option>

    and so on

    also is there a way to assign a loop values to those list items instead of adding them manually ..
    let say the values i want in my DDl are the following based on rb1 :


    <option value="1" > Temp1</option>
    <option value="2" > Temp2</option>
    <option value="3" > Temp3</option>
    <option value="4" > Temp4</option>
    till ..

    <option value="10" > Temp10</option>

    and so..can we have it generic this way ?


    and based on rb2 :

    <option value="1" > Temp1</option>
    <option value="2" > Temp2</option>
    <option value="3" > Temp3</option>
    <option value="4" > Temp4</option>
    till
    <option value="20" > Temp20</option>

    Thanks
    Last edited by korssane; 10-15-2011 at 03:25 AM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Answering the first question:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var lists = [
        { "Orange" : 1, "Apple" : 2, "Kiwi" : 3,  "Watermelon" : 4, "Banana" : 5 },
        { "Potato" : 137, "Tomato" : 2817, "Legume" : 991 }
    ];
    
    function rbChoose( rb )
    {
        var sel = rb.form.TheList;
        sel.options.length = 0;
        var list = lists[ Number(rb.value) ];
        for ( var name in list )
        {
            sel.options[sel.options.length] = new Option( name, list[name] );
        }
    }
    </script>
    </head>
    <body>
    <form>
    Which food?
    <label><input type="radio" name="food" value="0" onclick="rbChoose(this);"/> Fruit</label>
    <label><input type="radio" name="food" value="1" onclick="rbChoose(this);"/> Vegetables</label>
    <br/>
    <select name="TheList" onchange="alert(this.value);">
    <option>--choose fruit or vegetable--</option>
    </select>
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    korssane (10-15-2011)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Answering second question:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var ranges = [
        [ 1, 20 ],
        [ 331, 336 ]
    ];
    
    function rbChoose( rb )
    {
        var sel = rb.form.TheList;
        sel.options.length = 0;
        var range = ranges[ Number(rb.value) ];
        for ( var i = range[0]; i <= range[1]; ++i )
        {
            sel.options[sel.options.length] = new Option( "Temp" + i, i );
        }
    }
    </script>
    </head>
    <body>
    <form>
    Which range?
    <label><input type="radio" name="which" value="0" onclick="rbChoose(this);"/> Low numbers</label>
    <label><input type="radio" name="which" value="1" onclick="rbChoose(this);"/> High numbers</label>
    <br/>
    <select name="TheList" onchange="alert(this.value);">
    <option>--choose range--</option>
    </select>
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    korssane (10-15-2011)


  •  

    Posting Permissions

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