SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up innerHTML and drop-downs

    Ok, i haven't done JavaScript in ages, as i've moved onto php. However, a client wants me to do some javascript which is supposed to do the following:

    when a user clicks a radio button, javascipt populates the next drop-down depending on which radio button they clicked. This then happens to a next drop-down list.

    Now, i'm still toying with different ideas, but this is my best effort:

    example.htm
    Code:
    <html><body>
    <head>
    <script>
    function change1(){
    var radio = 3; // amount of radio buttons
    var i=0;
    while(i < radio)
    {
    	if(document.forms[0].make[i].checked==true)
    	     {
    	       b = i + 1;
    	       secondlevel(b);
    	     }
    i++
    };
    };
    var x;
    var leveltwo = new Array()
    leveltwo[0] = "option 1"
    leveltwo[1] = "option 2"
    leveltwo[2] = "option 3"
    function secondlevel(b){
    document.getElementById('second').innerHTML = "<select name=\"leveltwo\">";
    for (x in leveltwo){
    document.getElementById('second').innerHTML += "<option name=\"leveltwo\" value=\"" + leveltwo[x] + "\">" + leveltwo[x] + "</option>";
    }
    document.getElementById('second').innerHTML += "</select>";
    }
    </script>
    </head>
    
    <form>
    <table align="center"><tr>
    <td>Select a vehicle:&nbsp;</td>
    <td>
    a: <input type="radio" name="make" value="A" onChange="change1()">
    <br>
    b: <input type="radio" name="make" value="B" onChange="change1()">
    <br>
    c: <input type="radio" name="make" value="C" onChange="change1()">
    </td>
    <td align=center id="second" height="150px" width="220px">
    </td>
    </tr></table>
    </form>
    </body>
    
    </html>
    But, if i run that and click a radio button, the box "second" has an empty selectbox and next to it says "option 1option 2option 3". I see that the select box is supposed to be populated with the option 1, option 2 and option 3, but it simply doesn't.

    I did look on dynamicdrive, but their scripts aren't really select-radio convertable if you catch my drift.

    Please can someone look at my code and see what's wrong. I just can't get it!
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could create all possible dropdowns in PHP and then just use javascript to hide/show the appropriate one depending on the radio.

  3. #3
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Malmö, Sweden
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE won't play nice with innerHTML on select elements, so use dom methods instead for creating the options.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See this thread on how to create options without getting cross-browsers headaches


Bookmarks

Posting Permissions

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