禁用下拉选项在其他下拉

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