禁用下拉選項在其他下拉

Question

我有12個下拉菜單輸入區域，各1年的幾個月。每個下拉菜單都有相同的24個選項。

我需要讓這個，例如，如果在月份下拉框中選擇了第4個選項，該選項＃4不能在任何其他的下拉菜單中選擇。它仍然在下拉菜單中，但會被禁用。

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

有一個循環，我可以做檢查，並動態禁用這些值，而無需進行大量的if語句？

Answer 1

您可以使用jQuery找到其他所有下拉列表中選擇option元素（在我的例子，通過一定的class指定...並可以很容易地改變成另一個選擇 - 我想選擇​​太廣），然後使用.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％肯定，所有的options的將是每個所討論的select同樣與selectedIndex替換使用的value。

Answer 2

假如你想知道每個月下拉，併爲每個星期的選項。

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

Answer 3

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 4

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

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