選擇其他下拉菜單后，請禁用下拉菜單選項

Question

我有12個下拉菜單輸入區域，一年中的每個月都有1個。 每個下拉菜單都可以選擇相同的24個選項。

我需要這樣做，例如，如果在“一月”下拉框中選擇了選項＃4，則無法在其他任何下拉菜單中選擇該選項＃4。 它仍將位於下拉菜單中，但將被禁用。

這將有一個ajax觸發器來對照其他下拉菜單檢查值並動態更改其他下拉菜單。

我是否可以做一個循環來動態檢查和禁用這些值，而不必進行大量的if語句？

Answer 1

您可以使用jQuery在所有其他下拉列表中找到option元素（在我的示例中，由某個class指定...並且可以輕松地更改為另一個選擇器-我認為選擇器"select"過於寬泛），然后將其禁用使用.prop("disabled", true)的實際option元素。 但這比這里要棘手，因為您需要跟蹤先前選擇的值，以便在選擇其他值時再次啟用下拉菜單。 這是一個希望能對您有所幫助的示例：

http://jsfiddle.net/p5Arj/

$(document).ready(function () {
    $(".test").each(function () {
        var $self = $(this);
        $self.data("previous_value", $self.val());
    });

    $(".test").on("change", function () {
        var $self = $(this);
        var prev_value = $self.data("previous_value");
        var cur_value = $self.val();

        $(".test").not($self).find("option").filter(function () {
            return $(this).val() == prev_value;
        }).prop("disabled", false);

        if (cur_value != "") {
            $(".test").not($self).find("option").filter(function () {
                return $(this).val() == cur_value;
            }).prop("disabled", true);

            $self.data("previous_value", cur_value);
        }
    });
});

因此，這會在您選擇一個下拉菜單時禁用所有其他下拉菜單的相同選項，並確保在選擇另一個下拉菜單時，在所有其他下拉菜單中都啟用了前一個選項。 例如，在第一個下拉菜單中選擇“ 3” ...查看第二個下拉菜單-看到“ 3”已被禁用...回到第一個下拉菜單並選擇“ 1” ...在第二個下拉菜單中-看到再次啟用了“ 3”，但是禁用了“ 1”。 那就是.data在我的代碼中的用途。

當然，如果您100％確信所涉及的每個select所有options都相同，則可以用selectedIndex代替value的使用。

Answer 2

http://jsfiddle.net/Rk5e9/9/

只有大約10行，而且沒有ajax！

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>


Script:
$(document).ready(function(){
    $('.unique-value').focus(function(){
        var val = $(this).val();
        $(this).attr('data-current-value', val); 
    });

    $('.unique-value').change(function(){
        var val = $(this).val();
        if(val != -1)
            $('.unique-value option[value=' + val + ']').attr('disabled', 'disabled'); 

        var oldval = $(this).attr('data-current-value');
        $('.unique-value option[value=' + oldval + ']').removeAttr('disabled'); 
    });        
});​

Answer 3

我認為這將是最短的解決方案：

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

和jQuery代碼：

    $(document).on('change', '.select-attendee', function(){
        $current=$(this);
        $(".select-attendee").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
    });

Answer 4

假設您每個月都有一個下拉列表，每個星期都有一個選項。

<select class="month" id="october">
  <option class="week" value="week1">Week One</option>
  <option class="week" value="week2">Week Two</option>
</select>

假設您選擇一個星期，然后收聽該事件。

$(".month").change(function(event) {
   // Get the week just selected.
   var selectedWeek = $(this).children(".week:selected").val();
   // Enabled all weeks before disabling the selected week.
   $("option.week").removeAttr("disabled");
   // Disable all week options matching this selection.
   $("option.week[value="+selectedWeek+"]").attr("disabled", "disabled");
});