Question

我有3个下拉菜单，其中包含相同的选项，如下所示

<select id="one">
<option value="1">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="two">
<option value="1">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="three">
 <option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

如果用户在第三个下拉列表中选择选项“one”，则不应在第1和第2个下拉列表中显示“One”。在用户点击任何下拉列表的任何时间点，只应显示当前值以及未在其他下拉列表中选择的值。

有没有办法用jQuery实现这个目标

请帮忙。

Answer 1

您的HTML无效。您需要使用<option>

关闭</option>代码

您还需要在1旁边提供不同的值，例如-1，或者在每个选择内的第一个选项中将其保留为空白

然后你可以这样做以达到你的要求：

$('select').change(function () {
    var selectedVal = $(this).val();
    $(this).siblings('select').find('option[value="' + selectedVal + '"]').hide();
    $(this).siblings('select').find(':not(option[value="' + selectedVal + '"])').show();
    $(this).siblings('select').find('option:eq(0)').prop('selected', true);
});

<强> Fiddle Demo

Answer 2

可以使用选择下拉列表的事件侦听器来处理。在事件监听器函数中，从触发事件的元素中获取所选值。

获得所选值后，您可以遍历其他选择下拉列表并删除所选值。

以下是代码的简短代码段

    $('.dropdown').change(function (event) {
        $('.dropdown').each(function (index, element) {

            if (event.target.id == element.id) {
                return true;            
            }

            var selectedValue = event.target.value;
            $(element).children('[value=' + selectedValue + ']').remove();
        });
    });

这是一个完整的工作演示：

http://jsfiddle.net/399LF/

需要在下拉列表中级联选项

2 个答案: