Javascript 具有相同选项的多个选择框-需要唯一选择

我有一个有3个选择框的表格。每个选择框都有相同的选项。我想要求您必须为每个选择框选择不同的选项。例如，假设选项是猫、狗和鸟。如果有人在第一个选择框中选择了bird，我想在其他两个框中禁用或隐藏该选项。如果他们更改了选择，则bird将再次启用或取消隐藏

<select id="box1">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box2">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box3">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

谢谢你的帮助

试试这个

$('select').on('change', function () {
  $("select").find("option").removeAttr("disabled");
  $("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});

---

您可以使用onchange listener并同时计算结果。此外，还添加了一个重置按钮，因为一旦选择了三个，它将成为瓶颈

工作代码如下所示

功能更改选择元素{ var值={}； elements.forEachfunctionitem{ 值[item.id]=item.value； }; elements.forEachfunctionitem{ forvar i=0；i 流量必须从上到下。这也意味着，当用户更改下拉列表值时，必须重置该值之后的所有下一个下拉列表。说到这里，这里是我的代码片段

已处理的下拉列表$'box1'//最初调用此函数，通过将第一个下拉列表作为参数传递来处理下拉列表 $'select'。在'change'上，函数{ HandleDropdowns$this；//处理任何更改事件的所有下拉列表。 }; 函数HandleDropdownselement{ var$element=element； var值=$element.val； $element.nextAll.val；//使用nextAll可以重置以下所有下拉列表 $element.nextAll.attr'disabled'，'disabled'；//禁用以下所有下拉列表。 HandleOptions；//调用此函数以切换选项 if value.length{ $element.next.removeAttr'disabled'；//仅当此下拉列表具有某些选择时才启用下一个下拉列表。 } } 功能处理{ $'option'.removeAttr'disabled'；//重置所有可用选项 $。每个$'select'，函数{//从上到下循环并逐个禁用选项。 var值=$this.val； if value.length{ $this.nextAll.find'option[value='+value+']'.attr'disabled'，'disabled'； } }; } 选择 猫 狗 鸟 选择 猫 狗 鸟 选择 猫 狗 鸟

---

@下拉列表请解释原因，以便我将来更正。此代码不一致。当我在最后一个选择元素中选择最后一个剩余选项时，会发生什么情况，前两个元素现在仅禁用此选项，而其他两个选项对这两个下拉列表都启用。这意味着现在在第二个下拉列表中，我可以选择与第一个下拉列表相同的值谢谢。这似乎是最好的答案。但是，当您返回并更改第一个选择时，它是否必须重置所有内容？有没有一种方法，它只会重置您没有选择的选项？@LBF这会再次引入复杂性。例如，如果第一个下拉列表是猫，第二个是狗，第三个是鸟。。现在，如果我继续并选择dog in first，这意味着我需要清除第二个下拉列表。这意味着第三只鸟仍然被选中，但现在有可能我可以在第二个下拉菜单中选择鸟，这意味着我必须清除第三只。。这就是我建议在一个下拉列表更改值时重置以下下拉列表的原因。@LBF或者您正在寻找一种非自顶向下样式的解决方案。而是对所有下拉列表给予相同的优先级？是的，我正在寻找一种对所有下拉列表给予相同优先级的解决方案。我想@Melvin的答案就是这样的，但当你试图改变答案时，它并不能正常工作。嗯…@LBF根据您的要求添加了一个不同的方法。谢谢。我希望找到一种不用重置按钮的方法，但我明白为什么这是必要的。如果您试图返回并更改您的答案，而没有注意到您必须重置，那么这会有点混乱。

$('select').on('change', function () {
  $("select").find("option").removeAttr("disabled");
  $("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});