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

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

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

Demo

Answer 2

试试这个

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

        })

    }); 

});

显示和隐藏选择选项

2 个答案: