CODEWITHSUNDEEP
jqueryhtmlformsdrop-down-menu
Legs
Legs

Reputation: 41

Dynamic html dropdowns

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

Upvotes: 1

Views: 297

Answers (1)

Samson
Samson

Reputation: 2821

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.

Upvotes: 2

Related Questions