Question

我有十个下拉菜单

<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中选择Two，则在所有下拉列表中必须禁用选项Two。我如何在jquery中实现这一点？

Answer 1

是的我同意@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>

试试这个：

$('select').change(function(){
   var drop = $(this).val();
    $('select option').each(function(){
       if($(this).val() == drop && drop != "0")
       {
         $(this).attr('disabled','disabled')
       }
       else
       {
         $(this).removeAttr('disabled')
       }
    });
});

编辑： -

DEMO

注意： - 在此答案中，您可以根据自己的要求使用或保留else语句（在Jquery代码中）。

Answer 2

这是Short and Sweet的答案，

<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>

jQuery代码，

$('select').change(function () {
    if ($(this).find("option:selected").val() != "0") {
        var selected = $(this).find("option:selected").text();
        $('select option:contains("' + selected + '")').attr('disabled', 'disabled');
    }
});

Demo

Answer 3

最终编辑

我在代码中添加了一些注释 Here is a totally functional DEMO

我认为它完全符合您的要求。当我们更新一个值时，它将在其他选择中禁用它，并且因为已经选择而必须禁用的选项将保持（或实际重新设置）禁用。

以下是相关的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： 还是很简单，还有一些问题要解决，即我们应该遍历所有选择以检查以太，我们应该禁用或不禁用值。如果你想让我告诉你如何，请在评论中提问。 Here is a working JSFiddle

var $selects = $('select')

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

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

var $selects = $('select')

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

修改：错误已修复且the working JSFiddle。

Answer 4

@ Kartikeya的解决方案运行良好，但您需要对选项进行轻微更改并在开始时添加一个空选项，因为事件侦听器正在侦听事件更改并且所有选项都设置为1，因此最初它只适用于选择“两个”的情况。我不是说它不对，但你应该尝试添加一个空选项，以便当用户在开始时选择一个时它也可以工作。就像：

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

See the full demo here ，使用@ kartikeya的逻辑工作正常。

Answer 5

这是。

DEMO： http://jsfiddle.net/don/0t1sm71z/

一步一步：

获取所选值。
使用each()检查是否有任何选项具有相同的值。
使用hide()或attr('disabled', 'disabled')隐藏值。并使用show()或removeAttr('disabled')显示其他值。

检查演示： http://jsfiddle.net/don/0t1sm71z/

准备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>

准备好jQuery / Javascript：

$(document).ready(function() {
    $('.dropdown').change(function() {
        // Get the current value
        var selectedOption = $(this).val();

        // Check if any option has the same value        
        $('.dropdown option').each(function(){
            if($(this).val() == selectedOption && $(this).is(':selected') != true) {
                // If yes, hide this option
                $(this).hide();
            } else {
                // If not, show the option
                $(this).show();
            }
        });
    });
});

禁用下拉菜单

5 个答案: