JSFiddle - React, Tailwind, and code Playground
HTML
<select class="dropdown" id="category" name="cat">
<option value=""></option>
<option value="1">Entertainment</option>
<option value="2">Sound</option>
<option value="3">Peripherals</option>
<option value="4">Storage</option>
<option value="5">Power</option>
<option value="6">Network</option>
</select>
<select class="dropdown" name="subcat" id="subcat">
<option value=""></option>
<option class="cat0 " value="1">Entertainment</option>
<option class="cat0 " value="2">Sound</option>
<option class="cat0 " value="3">Peripherals</option>
<option class="cat0 " value="4">Storage</option>
<option class="cat0 " value="5">Power</option>
<option class="cat0 " value="6">Network</option>
<option class="cat1 " value="7">Tablets</option>
<option class="cat1 " value="8">Media Players</option>
<option class="cat1 " value="9">DVD Players</option>
<option class="cat1 " value="10">Photo Frames</option>
<option class="cat2 " value="11">PSYC Audio</option>
<option class="cat2 " value="12">Headsets</option>
<option class="cat2 " value="13">Mp3 Players</option>
<option class="cat2 " value="14">Speakers</option>
<option class="cat3 " value="15">AIO Card Readers</option>
<option class="cat3 " value="16">Cables</option>
<option class="cat3 " value="17">Keyboards</option>
<option class="cat3 " value="18">Mouse</option>
<option class="cat3 " value="19">PCI Cards</option>
<option class="cat3 " value="20">USB Hubs</option>
<option class="cat3 " value="21">VoIP</option>
<option class="cat4 " value="22">DVD Accessories</option>
<option class="cat4 " value="23">Enclosures</option>
<option class="cat4 " value="24">iPad Accessories</option>
<option class="cat4 " value="25">Optical Media</option>
<option class="cat4 " value="26">PC Cases</option>
<option class="cat4 " value="27">Photo Papers</option>
<option class="cat5 " value="28">Chargers</option>
<option class="cat5 " value="29">Inverters</option>
<option class="cat5 " ...
JavaScript
jQuery.fn.toggleOption = function( show ) {
jQuery( this ).toggle( show );
if( show ) {
if( jQuery( this ).parent( 'span.toggleOption' ).length )
jQuery( this ).unwrap( );
} else {
jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
}
};
$('#category').on('change', function(){
var val = $(this).val();
/* $('#subcat option').prop('disabled', function(){
return !$(this).hasClass('cat' + val)
}); */
$('#subcat option').each(function(){
var $option = $(this);
$option.toggleOption( $option.hasClass('cat' + val) );
});
});