Question

I have two dropdowns on a HTML form. I am trying to get the second dropdowns answers to be dynamic based upon the first box.
So if dropdown 1 is “1” dropdown two will have options “a” “b” “c”, if dropdown 1 is “2” dropdown 2 will have “d” “e” “f”.

What is the best way to achieve this, ideally with jQuery?

Thanks

Answer 1

Ideally, you use ajax to post the first option and get the options for the second select.

Example:

<script>
function onSelect1Change(){
$.post("url" ,{
        value: $("#select1").val()
          }, function(data) {
         $("#select2").html(data);
    }); 
}
</script>

<select id="select1" name="select1" onchange="onSelect1Change">...</select>
<select id="select2" name="select2" ></select>

In your back-end you check the $_POST['value'] and output some <option></option> tags.