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

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -