禁用下拉菜單

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>

等等...我的要求是，如果用戶從任何下拉列表中選擇任何選項，則必須在所有下拉列表中禁用該選項。 例如，如果用戶從下拉菜單3中選擇“兩個”，則在所有下拉菜單中必須禁用“兩個”選項。 我如何在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 Code中）。

Answer 2

這是簡短而甜蜜的答案，

<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');
    }
});

演示

Answer 3

最后編輯

我在代碼中添加了一些注釋。 這是一個功能齊全的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：仍然很簡單，仍然有一些問題要解決，即，我們應該遍歷所有選擇以檢查是否以太，我們應該禁用或不使用值。 在評論中詢問您是否要我告訴您如何操作。 這是一個正在工作的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')
});

編輯：已修復錯誤， 並且正在工作的JSFiddle 。

Answer 4

@Kartikeya的解決方案效果很好，但是您需要對選項進行一些更改，並在開始時添加一個空選項，因為當事件偵聽器正在偵聽事件更改並且所有選擇選項都設置為一個時，因此最初它只能工作當您選擇“兩個”時。 我並不是說它不正確，但是您應該嘗試添加一個空選項，以便當用戶在開始時也選擇一個時就可以使用。 就像：

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

使用@kartikeya的邏輯可以正常工作， 在此處查看完整的演示 。

Answer 5

這是。

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

一步步：

1. 獲取選擇的值。
2. 使用each()檢查是否有任何選項具有相同的值。
3. 使用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();
            }
        });
    });
});