Javascript 禁用下拉菜单

我有十个下拉菜单

<select id="dropdownmenu1">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="dropdownmenu2">
<option value="1">One</option>
<option value="2">Two</option>
</select>

一个
两个
一个
两个

等等。。。 我的要求是，如果用户从任何下拉列表中选择任何选项，则必须在所有下拉列表中禁用该选项。

---

例如，如果用户从dropdownmenu3中选择两个，则在所有下拉列表中，必须禁用选项二。如何在jquery中实现这一点？

是的，我同意@AbdulJabbar，现在在每个下拉列表中添加一个额外选项，您的html将如下所示：

<select id="dropdownmenu1">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<select id="dropdownmenu2">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

编辑：-

---

注意：-在这个答案中，您可以根据您的要求使用或留下

其他
语句（在Jquery代码中）。
是的，我同意@AbdulJabbar，现在您的html将显示如下所示：

<select id="dropdownmenu1">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<select id="dropdownmenu2">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

编辑：-


注意：-在此答案中，您可以根据需要使用或留下
其他
语句（在Jquery代码中）。最终编辑

我在代码中添加了一些注释

我想这正是你想要的。当我们更新一个值时，它将在其他选择中禁用该值，并且由于已选择而必须禁用的选项将保持（或实际重新设置）禁用状态

以下是相关的JS代码：

    // all the select but no current
    $selects.not($this).
        // get the options with the value of the current one
        // we ignore the value="null" bc that's "select an option"
        find('option[value='+value+']:not([value=null])').
        // disabling them
        prop('disabled','disabled');

我想这就是你需要的：）



以前的答案

编辑2:
仍然很简单，仍然有一些问题需要解决，即，我们应该循环所有选择以检查ether，或者我们应该禁用或不禁用某个值。如果你想让我告诉你怎么做，请发表评论

每次选择更改时，您都会获得所选选项，并在其他选择中将其设置为禁用

var $selects = $('select')

$selects.change(function() {
    var value = $(this).val();
    $selects.find('option[value='+value+']').prop('disabled', 'disabled')
});

编辑：修复错误并进行最终编辑。

我在代码中添加了一些注释

我想这正是你想要的。当我们更新一个值时，它将在其他选择中禁用该值，并且由于已选择而必须禁用的选项将保持（或实际重新设置）禁用状态

以下是相关的JS代码：

    // all the select but no current
    $selects.not($this).
        // get the options with the value of the current one
        // we ignore the value="null" bc that's "select an option"
        find('option[value='+value+']:not([value=null])').
        // disabling them
        prop('disabled','disabled');

我想这就是你需要的：）



以前的答案

编辑2:
仍然很简单，仍然有一些问题需要解决，即，我们应该循环所有选择以检查ether，或者我们应该禁用或不禁用某个值。如果你想让我告诉你怎么做，请发表评论

每次选择更改时，您都会获得所选选项，并在其他选择中将其设置为禁用

var $selects = $('select')

$selects.change(function() {
    var value = $(this).val();
    $selects.find('option[value='+value+']').prop('disabled', 'disabled')
});

编辑：bug fixed and.
@Kartikeya的解决方案运行良好，但您需要对选项进行轻微更改，并在开始时添加一个空选项，因为事件侦听器正在侦听事件更改，并且所有选择选项都设置为一，所以最初仅当您选择“两个”时才起作用。我并不是说它不正确，但您应该尝试添加一个空选项，这样当用户在开始时选择一个选项时它也会工作。就像：

<select id="dropdownmenu1">
    <option value="0"></option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>


一个
两个

，使用@kartikeya的逻辑运行良好。
@kartikeya的解决方案运行良好，但您需要对选项进行轻微更改，并在开始时添加一个空选项，因为事件侦听器正在侦听事件更改，并且所有选择选项都设置为一，因此最初仅当您选择“两个”时，它才起作用。我并不是说它不正确，但您应该尝试添加一个空选项，这样当用户在开始时选择一个选项时它也会工作。就像：

<select id="dropdownmenu1">
    <option value="0"></option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>


一个
两个

，使用@kartikeya的逻辑，该逻辑运行良好。
以下是

演示：

逐步：

获取选定的值
使用
each（）
检查是否有任何选项具有相同的值
使用
Hide（）
或
attr（'disabled'，'disabled'）
隐藏值。并使用
show（）
或
removeAttr（'disabled'）
显示其他值
检查演示：


就绪HTML：

<select id="dropdownmenu1" class="dropdown">
    <option value="" selected="selected">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select id="dropdownmenu2" class="dropdown">
    <option value="" selected="selected">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

这是

演示：

逐步：

获取选定的值
使用
each（）
检查是否有任何选项具有相同的值
使用
Hide（）
或
attr（'disabled'，'disabled'）
隐藏值。并使用
show（）
或
removeAttr（'disabled'）
显示其他值
检查演示：


就绪HTML：

<select id="dropdownmenu1" class="dropdown">
    <option value="" selected="selected">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select id="dropdownmenu2" class="dropdown">
    <option value="" selected="selected">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

这是一个简短而甜蜜的回答

<select id="dropdownmenu1">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu2">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu3">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu4">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

以下是简短而甜蜜的答案

<select id="dropdownmenu1">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu2">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu3">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select id="dropdownmenu4">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

您还可以做一件事，当选择一个空选项时，所有其他禁用的选项都应该被启用。@kartikeyagreat bro…+1@kartikeya问题是您删除了所有选择中所有选项的禁用属性，即使它在其他下拉列表中被选中。（事实上就在下面）。@Cohars.对不起，我没听懂你的意思……我想你误解了这个问题actually@clementrakeshn...then使用“.removeAttr（'disabled'）”要还原更改..如我的回答中的else语句所示，您可以做的另一件事是，当选择一个空选项时，应启用所有其他禁用的选项。@kartikeyagreat bro…+1@kartikeya问题是您删除了所有select中所有选项的disabled属性，即使在其他下拉列表中选择了它。（事实上就在下面）。@Cohars.对不起，我没听懂你的意思……我想你误解了这个问题actually@clementrakeshn...then使用“.removeAttr（'disabled'）”还原更改..如我的答案的else语句
$（'select option'）所示。removeAttr（'disabled'）
将还原
$（'select option'）。removeAttr（'disabled'）将还原该值，这是什么意思？您只需重新选择“选择一个选项”，其他人就可以重新使用该选项。这看起来像一个多人游戏，你可以拿起一个ch