Jquery 2 个下拉列表，从下拉列表 2 中删除所选项目 1

Question

我有一个带有 2 个下拉列表的简单表单，每个下拉列表都有相同的值。

      <option value="attr1">attr1</option>
      <option value="attr2">attr2</option>
      <option value="attr3">attr3</option>

（这只是列表的一个示例，它可能有 50 多个条目）

如果在下拉列表 1 中，我 select attr1 如何从下拉列表 2 中隐藏它？

如果我 select 下拉列表 1 中的另一个选项，则 attr1 需要添加回去，并且新 selected 项目从下拉列表 2 中隐藏。

为了让这更难，我正在克隆包含下拉列表的 TR。

我正在使用此 fiddle 中的代码来克隆表单上的下拉列表。

所以在一个新的克隆行上，我需要它独立于其他行，因为在它的下拉列表中 selected 只影响它的下拉列表 2。

我不知道从哪里开始，但会搜索以查看我找到了什么。

有没有人有任何指示或例子来做这件事？

谢谢

Answer 1

你必须在 select 元素的更改事件上写这个。

$("#BoxName").change(function(){
        var selectedItem = $(this).val();   
        var nextDropdown = $(this).parent("td").next("td").find("select.BoxComparisonClass");

        $(nextDropdown).find("option").show();
        $(nextDropdown).find("option:[value="+selectedItem+"]" ).hide();
    });

看到这个JsFiddle

希望对您有所帮助。

Jquery 2 个下拉列表，从下拉列表 2 中删除所选项目 1

Jquery 2 dropdown lists, remove selected item 1 from dropdown 2

jquery

drop-down-menu

hide

clone