Master Slave Select

Contents of second select is dependent on the contents of first one.

by Subigya Panta

HTML

<select name="mobile-phone" class="mobile-phone" id='sel1'>
    <option value="Select">Select</option>
    <option value="Nokia">Nokia</option>
    <option value="Samsung">Samsung</option>
    <option value="HTC">HTC</option>
    <option value="Apple">Apple</option>
</select>
<select name="mobile-model" class="mobile-model" id='sel2'>
    <option value="Select">Select</option>
    <option value="Nokia--Lumia-520">Lumia 520</option>
    <option value="Nokia--Lumia-620">Lumia 620</option>
    <option value="Samsung--Galaxy-s3">Galaxy S3</option>
    <option value="Samsung--Galaxy-s4">Galaxy S4</option>
    <option value="HTC--hero">Hero</option>
    <option value="HTC--one">One</option>
    <option value="Apple--iphone4">iPhone 4</option>
    <option value="Apple--iphone5">iPhone 5</option>
</select>

JavaScript

$("#sel2").prop("disabled", true);

$( "#sel1" ).change(function() {
  var value = $(this).val();
    $("#sel2").prop("disabled", false);
    $("#sel2 > option").hide();
    $("#sel2 > option[value*='" + value +"']").show();
   
    
});