JQuery删除选项id！=其他选择的选项

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