JQuery 删除选项 where id != Other Selected Option

Question

我认为这是一个简单的语法问题。我有一个州列表和一个城市列表。一旦用户选择了一个状态，我想使用 Jquery 删除所有选项，但处于选定状态的选项除外。

脚本：

<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>

Answer 1

试试这个：-

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

我不确定您是否真的要删除这些选项，可能禁用会是更好的选择。

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
    });
});

更新隐藏和显示选项（不适用于所有浏览器）：-

隐藏不需要的下拉菜单而不是删除它们：-

Demo

脚本

$(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;
}

更新 2：- 将选项存储为数据并重建选择。

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}));
         });
    });
});