www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] How to change "Select" options with radio buttons?

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    resolved [RESOLVED] How to change "Select" options with radio buttons?

    So, I've got two radio buttons, one attached to a provinces array, so it displays all of Canada's provinces in a select menu when clicked. I've got a second radio button attached to a states array that will display a select menu when the United States is clicked. What I can't figure out is how to make the provinces disappear when the user changes from the Canada radio button to the United States button and have the states appear in its place. I'll skip posting the array, but here's the rest of the code:

    PHP Code:
    //in the HTML
    <p><label><input type="radio" name="radio" value="Canada" onclick="createProvSelect('selectDiv', provinces);" />Canada</label></p>
    <
    p><label><input type="radio" name="radio" value="USA" onclick="createStateSelect('selectDiv', states);" />United States of America</label></p>
    <
    div id="selectDiv"></div>

    //in .js document
    function createProvSelect(divIdprovincesArray) {
    var 
    mySelect document.createElement("SELECT");
    mySelect.setAttribute("name""province");
    mySelect.setAttribute("id""province");
    var 
    newOption;
    var 
    newTextNode;
    for (
    0provincesArray[0].lengthi++) {
    //create the new option
    newOption document.createElement("OPTION");
    //set the value of the new option. values are in provinces[1]
    newOption.setAttribute("value"provincesArray[1][i]);
    //make a new text node - that's the text that appears between the opening and closing option tags
    //it is what you see in the pulldown menu choices
    //text node items are in provinces[0]
    newTextNode document.createTextNode(provincesArray[0][i]);
    //append the text node to the option
    newOption.appendChild(newTextNode);
    //append the option to the select
    mySelect.appendChild(newOption);
    }
    document.getElementById(divId).appendChild(mySelect);
    }

    function 
    createStateSelect(divIdstatesArray) {
    var 
    mySelect document.createElement("SELECT");
    mySelect.setAttribute("name""state");
    mySelect.setAttribute("id""state");
    var 
    newUsaOption;
    var 
    newUsaTextNode;
    for (
    0statesArray[0].lengthi++) {
    //create the new option
    newUsaOption document.createElement("OPTION");
    //set the value of the new option. values are in provinces[1]
    newUsaOption.setAttribute("value"statesArray[1][i]);
    //make a new text node - that's the text that appears between the opening and closing option tags
    //it is what you see in the pulldown menu choices
    //text node items are in provinces[0]
    newUsaTextNode document.createTextNode(statesArray[0][i]);
    //append the text node to the option
    newUsaOption.appendChild(newUsaTextNode);
    //append the option to the select
    mySelect.appendChild(newUsaOption);
    }
    document.getElementById(divId).appendChild(mySelect);

    Does anyone know how I'd alter this to get the desired results?

  2. #2
    Join Date
    Dec 2012
    Posts
    54
    Its hard to troubleshoot since you aren't telling me your current results.

    I'm going to have to make a guess then.

    When you switch from one to the other is it just adding the new array options but not removing the old ones? That would be my guess by the word "append."

    Append means to add but not remove you could try clearing the divId first with a
    Code:
    document.getElementById(divId).innerHTML = "";
    and then executing your append.

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    Sorry, I missed that I suppose.

    As it stands now, when I select the "Canada" radio button, it creates a selection box filled with the provinces. When I switch it to the United States radio button, it creates another selection box filled with the states beside the first one. So, what I need, is when the user switches the radio buttons, it removes the provinces selection box and replaces it with the states selection box and vice versa.

  4. #4
    Join Date
    Dec 2012
    Posts
    54
    Like I said add the line

    Code:
    document.getElementById(divId).innerHTML = "";
    before your append statement... like soo

    Code:
    function createStateSelect(divId, statesArray) { 
      var mySelect = document.createElement("SELECT"); 
      mySelect.setAttribute("name", "state"); 
      mySelect.setAttribute("id", "state"); 
      var newUsaOption; 
      var newUsaTextNode; 
      for (i = 0; i < statesArray[0].length; i++) { 
        //create the new option 
        newUsaOption = document.createElement("OPTION"); 
        //set the value of the new option. values are in provinces[1] 
        newUsaOption.setAttribute("value", statesArray[1][i]); 
        //make a new text node - that's the text that appears between the opening and closing option tags 
        //it is what you see in the pulldown menu choices 
        //text node items are in provinces[0] 
        newUsaTextNode = document.createTextNode(statesArray[0][i]); 
        //append the text node to the option 
        newUsaOption.appendChild(newUsaTextNode); 
        //append the option to the select 
        mySelect.appendChild(newUsaOption); 
      } 
      document.getElementById(divId).innerHTML = "";   // <---------- ADD IT HERE THIS WILL CLEAR THE TARGET DIV 
      document.getElementById(divId).appendChild(mySelect); 
    }
    Add that line of code to both functions and you should be fine.

  5. #5
    Join Date
    Apr 2014
    Posts
    44
    That worked fantastically! Thank you!

  6. #6
    Join Date
    Aug 2008
    Posts
    40
    mrjane

    Could you possibly show me how you setup the arrays. I'm working on some thing similar.

    Thanks. . .

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles