Show DropDown based on selection

Question

I have created a basic Drop down list for operators. I was thinking is there a way to show dropdown item based on selection. If in Category Drop Down i select Price which is integer than operator dropdown should show only integer related items.

Thanks

Answer 1

Is this what you need? http://jsfiddle.net/lotusgodkk/GCu2D/22/

Javscript:

$(document).ready(function () { $(document).on('change', '.category', function () { var val = $(this).val().toLowerCase(); $('.operator option').hide(); $('.operator option.'+val).show(); $('.operator option.'+val+':first').attr('selected','selected').change(); }); });

HTML:

<select class="category">
    <option val="price">Price</option>
    <option val="weight">weight</option>
    <option val="size">Size</option>
    <option val="dimension">Dimension</option>
</select>
<select class="operator">
    <option val="1" class="price">For Price 1</option>
    <option val="2" class="price">For Price 2</option>
    <option val="3" class="price">For Price 3</option>
    <option val="4" class="price">For Price 4</option>    
    <option val="1" class="weight">For Weight 1</option>
    <option val="2" class="weight">For Weight 2</option>
    <option val="3" class="weight">For Weight 3</option>
    <option val="4" class="weight">For Weight 4</option>    
    <option val="1" class="size">For Size 1</option>
    <option val="2" class="size">For Size 2</option>
    <option val="3" class="size">For Size 3</option>
    <option val="4" class="size">For Size 4</option>
    <option val="1" class="dimension">For Dimension 1</option>
    <option val="2" class="dimension">For Dimension 2</option>
    <option val="3" class="dimension">For Dimension 3</option>
    <option val="4" class="dimension">For Dimension 4</option>
</select>

you can modify it to change the type detection. I used class for selecting the option, you can set custom attributes in option in order to differentiate them. Hope it helps.