JQuery Remove Options Where id != Other Selected Option

Question

I think this is a simple syntax problem. I have a list of states and a list of cities. Once the user selects a state, I want to use Jquery to remove all options but those in the 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>

PSL · Accepted Answer · 2013-05-20T01:30:00.557

3

Try this:-

$(function () {
    $('#state').change(function () {
        var selstate = $(this).val();
        $('#city option').not('.' + selstate).remove();
    });
});

I am not sure you really want to remove the options, probably disable would be a 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 to the first city for the new state
    });
});

Update Hide and show options (Doesnot work in all browsers):-

Hide the 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 the options as data and reconstruct the select.

Demo

$(function(){

    $('#state').data('city', $('#city option'));//Store the options initially in data.

    $(function () {
        $('#state').change(function () {
             var selstate = $(this).val();
             var options = $(this).data('city');
               $('#city').html(options.filter(function(){return this.className === selstate}));
         });
    });
});

edited May 20 '13 at 01:30

answered May 20 '13 at 00:53

PSL

123,204
21
253
243

You're saying disable because if it's removed I can't get it back if they change the state again? – Brian Barrus May 20 '13 at 01:05
Yes, if you remove it you need to add them back again. removing an option will remove them from DOM altogether. – PSL May 20 '13 at 01:05
@BrianBarrus See mu update, instead of removing. Show and hide them instead. – PSL May 20 '13 at 01:12
It still displays all options for me. Is that a browser thing (Safari)? – Brian Barrus May 20 '13 at 01:14
Hmm check this http://stackoverflow.com/questions/15025555/js-option-style-display-none-working-in-chrome-but-not-in-safari – PSL May 20 '13 at 01:17
If you store the data in a json. It can be reconstruct the optins during every change... Would you like to try that option. – PSL May 20 '13 at 01:18
1

Beautiful. That's the one. – Brian Barrus May 20 '13 at 01:30

JQuery Remove Options Where id != Other Selected Option

1 Answers1

Demo

Demo

Script

Css

Demo