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

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

我需要这样做，例如，如果在一月下拉框中选择了选项4，则该选项4不能在任何其他下拉菜单中选择。它仍将在下拉列表中，但将被禁用

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

---

是否有一个循环可以用来动态检查和禁用这些值，而不必做很多if语句？

假设您每个月都有一个下拉列表，每个星期都有一个选项

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

---

您可以使用jQuery在所有其他下拉列表中查找

选项

元素（在我的示例中，由某个

类指定

…并且可以很容易地更改为另一个选择器-我认为选择器

“select”

太宽），然后使用

.prop（“disabled”，true）禁用实际的
选项
元素

。但这比这要复杂一点，因为您需要跟踪以前选择的值，以便在选择其他值时再次启用下拉列表。下面是一个很有帮助的例子：

因此，当您选择一个下拉列表时，这将禁用所有其他下拉列表的相同选项，并确保当您选择另一个下拉列表时，在所有其他下拉列表中启用上一个下拉列表。例如，在第一个下拉列表中选择“3”…查看第二个下拉列表-查看“3”已禁用…返回第一个下拉列表并选择“1”…查看第二个下拉列表-查看“3”已再次启用，但“1”已禁用。这就是在我的代码中使用

.data

的目的

当然，如果您100%确定所有

选项

对于每个有问题的

选择

都是相同的，您可以将

值

替换为

selectedIndex

。

只有大约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'); 
    });        
});​

违约
弗斯特
第二
第三
违约
弗斯特
第二
第三
违约
弗斯特
第二
第三
脚本：
$（文档）.ready（函数（）{
$（'.unique value'）.focus（函数（）{
var val=$（this.val（）；
$（this.attr（'data-current-value'，val）；
});
$（'.unique value'）.change（函数（）{
var val=$（this.val（）；
如果（val！=-1）
$（'.unique-value-option[value='+val+']'）.attr（'disabled'，'disabled'）；
var oldval=$（this.attr（'data-current-value'）；
$（'.unique value option[value='+oldval+']'）。removeAttr（'disabled'）；
});        
});​

我认为这是最短的解决方案：

<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>

---

您可以在您不希望用户选择的选项上设置一个

disabled

属性。这正是我想要的，它可以完美地工作。非常感谢你！我希望禁用整个下拉列表2，直到在1中选择某些内容

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

<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>

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