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

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>

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

有没有办法用 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

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

一旦您选择了值，您就可以循环访问其他选择下拉菜单并删除选定的值。

这是一个简短的sn-p代码

    $('.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/