drop down menu - JQuery Remove Options Where id != Other Selected Option -
i think simple syntax problem. have list of states , list of cities. once user selects state, want use jquery remove options in selected state.
script:
<script> $(function(){ $('#state').change(function(){ var selstate = $('#state:selected').text(); $('.city:not(#'+selstate+')').remove(); }); }); </script> html:
<select id="state" name='state'> <option value="al">alabama</option> <option value="ak">alaska</option> </select> <select id="city" name='city'> <option class="al" value="city a">city a</option> <option class="al" value="city b">city b</option> <option class="ak" value="city c">city c</option> <option class="ak" value="city d">city d</option> </select>
try this:-
$(function () { $('#state').change(function () { var selstate = $(this).val(); $('#city option').not('.' + selstate).remove(); }); }); i not sure want remove options, disable better option.
demo
$(function () { $('#state').change(function () { var selstate = $(this).val(); $('#city option').prop('disabled', false).not('.' + selstate).prop('disabled',true); $('#city option').not('[disabled]').eq(0).prop('selected',true); // clear current selection first city new state }); }); update hide , show options (doesnot work in browsers):-
hide unwanted dropdown instead of removing them:-
demo
script
$(function () { $('#state').change(function () { var selstate = $(this).val(); $('#city option').addclass('hidden'); $('#city option.hidden').not('.' + selstate).removeclass('hidden'); $('#city option').not('.hidden').eq(0).prop('selected',true); }); }); css
.hidden { display:none; } update 2:- store options data , reconstruct select.
demo
$(function(){ $('#state').data('city', $('#city option'));//store options in data. $(function () { $('#state').change(function () { var selstate = $(this).val(); var options = $(this).data('city'); $('#city').html(options.filter(function(){return this.classname === selstate})); }); }); });
Comments
Post a Comment