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 to the CF scene
    Join Date
    Apr 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Controlling drop-down box options using radio buttons

    Hi

    I want to write a script that will control what options are displayed in a drop-down box depending on what radio button a user selects eg If the user selects radio button 1 then A,B & C are options, if the user selects radio button 2 then D, E and F are options and if a user selects radio button 3 then G,H and I are options.

    I have written a script to deal with the situation where if a user selects an option from a first drop-down box then different options are given in a second drop-down box but have not been able to successfully adapt to it the case where a set of radio buttons are used instead of the first drop-down box.

    Can someone please help me?

    That script is below (with cuisines and dishes being used as options rather than numbers and letters)

    var cuisines = new Array();
    var cuisineField;
    var dishField;

    function initDishes()
    {

    //find the required fields - this should run on load of the document so isn't written in a function.

    cuisineField=null;
    for (var x=0;x<entryForms.length && cuisineField==null;x++)
    {
    cuisineField = entryForms[x]["cuisineName"];
    dishField = entryForms[x]["dishName"];
    }

    // **************************************************

    //ENTER THE DATA FOR THE DISHES HERE

    //in alphabetical order first by Cuisine, then by Dish Name

    addDish(“Chinese”,”Cantonese Roasted Duck”);
    addDish(“Chinese”,”Red Cooked Pork with Tofu”);
    addDish(“Chinese”,”Mongolian Beef Fire Pot”);
    addDish(“Italian”,”Fegati Alla Veneziana”);
    addDish(“Italian”,”Abaccio Al Forno”);
    addDish(“Italian”,”Maccheroni con le sarde”);
    addDish(“Mexican”,”Chicken Enchilada”);
    addDish(“Mexican”,”Quesadilla Casserole”);
    addDish(“Mexican”,”Chiles Rellenos”);


    //END ENTERING DATA FOR THE DISHES
    // **************************************************

    //load the selections into the region field

    cuisineField.options[0] = new Option("-SELECT-");
    i = 0;
    for(x in cuisines)
    {
    i++;
    cuisineField.options[i] = new Option(x);
    }

    cuisineField.options[0].selected = true;
    dishField.options[0].selected = true;

    getCookies();
    updateDishList();
    getCookies();
    }

    function updateDishList()
    {

    //remove the current options in the list

    for(j=dishField.options.length;j>=0;j--)
    {
    dishField.options[j] = null;
    }

    //populate the new options in the list

    selCuisine = cuisineField.options[cuisineField.selectedIndex].text;
    dishField.options[0] = new Option("-SELECT-");
    dishField.options[0].selected = true;
    i = 0;
    for(x in cuisines[selCuisine])
    {
    i++;
    dishField.options[i] = new Option(x);
    }
    }

    function addDish(cuisine, dish, id)
    {

    //define a new Dish

    if(cuisines[cuisine]==undefined)
    {
    cuisines[cuisine] = new Array();
    }

    cuisines[cuisine][dish] = id;
    }
    }

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I made this script in such a way that it works even when the number of corresponding option items varies. Your current requirement has always 3 corresponding items (A, B, C or D, E, F, or G, H, I)
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function generateItems(objRad){
       var arrItems = objRad.value.split(','); //get corresponding items
       var objSel = objRad.form.mySelect;
       objSel.options.length=1; //remove all items except "--Select one--"
       for (var i=0;i<arrItems.length;i++){
          objSel.options[i+1] = new Option(arrItems[i], arrItems[i]);
       }
       objSel.selectedIndex = 0;
    }
    </script>
    </head>
    <body>
    <form name="f">
    <input type="radio" name="rad" value="A,B,C" onclick="generateItems(this)" />Selection 1
    <input type="radio" name="rad" value="D,E,F" onclick="generateItems(this)" />Selection 2
    <input type="radio" name="rad" value="G,H,I" onclick="generateItems(this)" />Selection 3
    <select name="mySelect">
    <option>--Select one--</option>
    </select>
    </form>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks Glenn. I will try it out.


  •  

    Posting Permissions

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