Question

我有12个下拉输入区域，一年中的每个月都有1个。每个下拉列表都可以选择相同的24个选项。

我需要这样做，例如，如果在1月下拉框中选择选项＃4，则无法在任何其他下拉菜单中选择选项＃4。它仍将处于下拉状态，但只会被禁用。

这将有一个ajax触发器来检查其他下拉菜单的值并动态更改其他下拉菜单。

我是否可以做一个循环来动态检查和禁用这些值，而不必制作大量的if语句？

Answer 1

您可以使用jQuery在所有其他下拉列表中找到option元素（在我的示例中，由某个class指定...并且可以轻松地更改为另一个选择器 - 我认为选择器"select"过于宽泛，然后使用option停用实际的.prop("disabled", true)元素。但它比这更棘手，因为您需要跟踪之前选择的值，以便在选择不同的值时再次启用下拉列表。这是一个有希望帮助的例子：

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％确定所有value对于selectedIndex中的每个options都相同，则可以将select替换为{{1}}问题

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

在其他下拉列表中选择一次后禁用下拉选项

4 个答案: