Question

I have a dropdown which must populate several other dropdowns depending on the option selected. I found a way how to do this using hidden fields. I created a hidden field for every sub dropdown with all its options. Then from my JS function, I check which selectedIndex is selected and then give the value of its respective hidden field.

This way works great, however, I am setting the value of the sub dropdown using the variable ID FROM the Js function. This reduces flexibility.

Does anybody know any other way how to pass all the parameters from the HTML?

Best method would be that all dropdowns are there but are not displayed. Upon change of the main dropdown, the respective sub drop down ONLY is shown.

Any ideas?

Answer 1

You should be able to do just what you want, have all the dropdowns hidden except the correct one.

<script type="text/javascript"> 
function changedropdown(index) {
  dropdowns['dropdown1'].style.display='none';
  dropdowns['dropdown2'].style.display='none';
  dropdowns['dropdown3'].style.display='none';
  dropdowns['dropdown4'].style.display='none';
  dropdowns[index].style.display='inline';
}
</script> 

<form name='dropdowns'> 
  <select onchange='changedropdown(options[selectedIndex].value)'> 
    <option selected value='dropdown1'>1</option> 
    <option value='dropdown2'>2</option> 
    <option value='dropdown3'>3</option> 
    <option value='dropdown4'>4</option> 
  </select> 

  <select name='dropdown1'> 
    <option selected value=1>dropdown1</option> 
  </select> 
  <select style='display:none' name='dropdown2'> 
    <option selected value=1>dropdown2</option> 
  </select> 
  <select style='display:none' name='dropdown3'> 
    <option selected value=1>dropdown3</option> 
  </select> 
  <select style='display:none' name='dropdown4'> 
    <option selected value=1>dropdown4</option> 
  </select>
</form>