Populating secondary dropdown from main dropdown through JS

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?

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>

If I understand the issue, the hidden values are not being returned in your post? To get around this issue I run a routine on submit that grabs all the hidden values and puts them into non hidden inputs of type hidden.

So...assuming you use jquery that would be something along the lines of

<div id='hiddenValues'></div>
<script type='text/javascript'>
    function onSubmit() {
        var hiddenValue = $('$yourHiddenSelectBox').val();
        $('#hiddenValues').append("<input type='hidden' name='someId' value='" + hiddenValue + "'>";
    }
 </script>