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