显示和隐藏选择选项

Question

我创建了一个非常基本的表单，它有 2 个下拉列表。

每个列表都包含相同的条目：

<option value='1234:0'>Closed</option>
<option value='4567:2'>Open</option>
<option value='6857:1'>Dead</option>
<option value='9856:1'>Alive</option>
<option value='0000:0'>Other</option>

如果选择了下拉列表 1 中的条目，则应从下拉列表 2 中删除该条目

如果在下拉列表 1 中选择了不同的条目，则应将其从下拉列表 2 中删除，并将原始条目返回到下拉列表 2

如果在下拉列表 1 中未选择任何内容，则所有选项都应显示在下拉列表 2 中。

我创建了一个FIDDLE，显示了我已经走了多远……还不是很远。

有人可以帮忙吗？

谢谢

Answer 1

试试这个

$(function(){

    $('#test').change(function () {

        var selected = $(this).val();   

        $("#test2 option").show();

        $("#test2 option[value='" + selected + "']").hide();

    }); 

}); 

如果你想使用文字，你可以试试这个

$(function(){

    $('#test').change(function () {

        var selected = $('option:selected', this).text();

        $("#test2 option").each(function(){

            if($(this).text() == selected) {

                $(this).hide();

            } else {

                $(this).show();
            }

        })

    }); 

}); 

Answer 2

由于每个选项的值相同，您可以使用value 属性在第二次选择中选择匹配项。

$('form').on('change', 'select[name="test"]', function() {
    var selected = $(this).val();
    $("#test2 option").show();
    $("#test2 option[value='" + selected + "']").hide();
});

Demo