how to change second drop down list on change of first drop down list option

by

HTML 

<select name="select11" id="select11">
<option value="1">Fruits</option>
<option value="2">Animals</option>
<option value="3">Birds</option>
<option value="4">Cars</option>
</select>

<select name="select12" id="select12">
<option value="1">Litchi</option>
<option value="1">Mango</option>
<option value="1">Orange</option>
<option value="2">Lion</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Parrot</option>
<option value="3">Hawk</option>
<option value="4">Maruti</option>
</select>

JAVASCRIPT

$("#select11").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select12 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select12').html(options);
});

DEMO

Leave a Comment