Multiple Drop Down Boxes - Populate 2nd, 3rd etc boxes based on previous selections

Hi there,

I need some help with Javascript. I have a form with 5 drop down boxes (see attachment), I need the 2nd, 3rd, 4th and 5th drop down boxes to be populated with values based on the selection in the previous drop down box.

So, for example, the first drop down box - "iDevice" contains a list of Apple devices... iPhone, iPad, iPod and Apple TV. The 2nd drop down box - "Model" should be populated with either iPhone models, iPad models, iPod models or Apple TV models depending on which iDevice the user selected in the first box. The same goes for the 3rd, 4th and 5th drop down boxes.

Once a visitor has made a selection in each of the 5 drop down boxes I need a graphic button to appear underneath which says "Check your device" (I have this graphic ready) then once they have clicked that, I need the appropriate information to be displayed on the same page.

I haven't explained it very clearly, but the main part is the drop down box selection menu, if you think you can help please let me know - i'm on Skype and want to get this sorted today if possible, Paypal is waiting.

Thanks.

 

There are a couple of ways of doing this, but it generally requires adding an (unique) 'id' attribute to each <select> tag, as well as adding an 'onchange' attribute that points to the JavaScript function that handles the updating the <option>s in the other <select> tags. The code could go something like:

<script type="text/javascript">
  function updateLists(id) {
    changedEl = document.getElementById(id);  // the changed <select> element
    theVal = changedEl.value;
     switch (id) {
      case ('select1'):
       if (theVal == '1') {
       document.getElementById('select2').innerHTML = "<option value='a'>A</option><option value='b'>B</option>";
       document.getElementById('select3').innerHTML  = "<option value='c'>C</option><option value='d'>D</option>";
       document.getElementById('select4').innerHTML  = "<option value='e'>E</option><option value='f'>F</option>";
       document.getElementById('select5').innerHTML  = "<option value='g'>G</option><option value='h'>H</option>";
       }
       if (theVal == '2') {
       document.getElementById('select2').innerHTML  = "<option value='A'>A</option><option value='B'>B</option>";
       document.getElementById('select3').innerHTML  = "<option value='C'>C</option><option value='D'>D</option>";
       document.getElementById('select4').innerHTML  = "<option value='E'>E</option><option value='F'>F</option>";
       document.getElementById('select5').innerHTML  = "<option value='g'>G</option><option value='h'>H</option>";
       }
       break;
     case('select2'):
       if (theVal == '1') {
       document.getElementById('select3').innerHTML  = "<option value='c'>C</option><option value='d'>D</option>";
       document.getElementById('select4').innerHTML  = "<option value='e'>E</option><option value='f'>F</option>";
       document.getElementById('select5').innerHTML  = "<option value='g'>G</option><option value='h'>H</option>";
       }
       if (theVal == '2') {
       document.getElementById('select3').innerHTML  = "<option value='C'>C</option><option value='D'>D</option>";
       document.getElementById('select4').innerHTML  = "<option value='E'>E</option><option value='F'>F</option>";
       document.getElementById('select5').innerHTML  = "<option value='g'>G</option><option value='h'>H</option>";
       }
       break;
    } // end switch()
 } // end updateLists()
</script>
<form..... >
<select id="select1" onchange="upldateLists('select1')"><option value="1">1</option><option value="2">2</option></select>
<select id="select2" onchange="upldateLists('select2')"></select>
<select id="select3" onchange="upldateLists('select3')"></select>
<select id="select4" onchange="upldateLists('select4')"></select>
<select id="select5"></select>
<input type="submit" value="Submit"><br>
</form>

Code (markup):

This is just to give you an idea for a possible approach. The code is incomplete, crude, and isn't intended to actually work as written here.

 

Thanks for the pointers, would you be interested in doing to code for $$?