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

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

我有一个带有 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。

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

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

谢谢

你必须在 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

希望对您有所帮助。