Question

我有几个选择框（确切的数字是动态的），每个框都包含相同的值。当在一个框中选择一个选项时，我想在所有其他选择框中disable这个值。

如此jsFiddle所示，当您在第一个选择框中选择一个值时，它会在第二个选择框中正确禁用该值。当您在第二个选择框中选择一个值时，代码会在第一个选择框中正确禁用该值;但是，它在第二个框中启用（即不禁用）来自第一个选择框的原始选定值。

要复制：为第一个选择框选择Value One。在第二个选择框中正确禁用了Value One。现在在第二个选择框中选择Value Two。它在第一个选择框中被禁用，但现在在第二个选择框中未正确启用Value One。

在尝试诊断问题几个小时之后，似乎我的.each语句只处理第一个选择框，并且没有前进到第二个选择框以迭代它的值。修改：实际上它并没有停止处理;如果从jsFiddle（启用不再选择的值的else语句）中删除第22-24行，然后在第一个选择框中选择Value One然后Value Three，则代码正确处理第二个选择框并停用Value One和Value Three。因此，selectedAreas上的多次迭代会出现问题吗？

如何使用我的area_select课程对页面上所有选择框中的所有选项进行迭代？

我的jQuery：

$(function() {
    $(document).on('change', '.area_select', function (e) {
        generateSelectedAreas();            
    });
});

function generateSelectedAreas()
{
    var selectedAreas = new Array();

    //Get all the currently selected areas
    $('.area_select option:selected').each(function () {
            if ($(this).val() != '') {
                selectedAreas.push($(this).val());
            }
    });

    //The selectedAreas array contains all the correct values, as shown here
    console.log(selectedAreas);

    $('.area_select>option:not(:selected)').each(function () {
        for(var counter=0; counter < selectedAreas.length; counter++) {
            if (selectedAreas[counter] == $(this).val()) {
                $(this).attr("disabled", true);
            }
            else {
                $(this).attr("disabled", false);    
            }
        }       
    });

    return selectedAreas;
}

Answer 1

好的，这有点复杂，但我会尽力解释这里发生的事情。

主要问题源于以下声明：

$('.area_select>option:not(:selected)').each(function () {
    for(var counter=0; counter < selectedAreas.length; counter++) {
        if (selectedAreas[counter] == $(this).val()) {
            $(this).attr("disabled", true);
        }
        else {
            $(this).attr("disabled", false);    
        }
    }       
});

假设我有两个select元素：

Select 1
---------
Value 1 
Value 2
Value 3
Value 4

Select 2
---------
Value 1 
Value 2
Value 3
Value 4

您遍历当前未选中的每个选项：

Select 1 (Selected Value 3)
---------
Value 1 (Enabled)
Value 2 (Enabled)
Value 4 (Enabled)

Select 2 (Selected Value 4)
---------
Value 1 (Enabled)
Value 2 (Enabled)
Value 3 (Enabled)

selectedAreas = ['Value 3', 'Value 4']

然后，您可以浏览selectedAreas中的每个单独值并说出

如果selectedArea值等于当前option，则禁用它，否则启用它

现在看看当你浏览每个值时会发生什么：

如果选项等于值3

Select 1 (Selected Value 3)
---------
Value 1 (Enabled)
Value 2 (Enabled)
Value 4 (Enabled)

Select 2 (Selected Value 4)
---------
Value 1 (Enabled)
Value 2 (Enabled)
Value 3 (Disabled)

如果选项等于值4

Select 1 (Selected Value 3)
---------
Value 1 (Enabled)
Value 2 (Enabled)
Value 4 (Disabled)

Select 2 (Selected Value 4)
---------
Value 1 (Enabled)
Value 2 (Enabled)
Value 3 (Enabled)

你看，它重叠了。

您想要做的是以下内容：

$(function() {
    $(document).on('change', '.area_select', function (e) {
        generateSelectedAreas();            
    });

    function generateSelectedAreas()
    {
        //enable all options, otherwise they overlap and cause probl
        $('.area_select option').each(function () {
            $(this).prop('disabled', false);
        });

        $('.area_select option:selected').each(function () {
           var select = $(this).parent(),
           optValue = $(this).val();

           if($(this).val()!=''){
               $('.area_select').not(select).children().filter(function(e){
                   //filters all children equal to option value
                   if($(this).val()==optValue)
                       return e
               }).prop('disabled', true);
           }
        });
    }
});

样本： http://jsfiddle.net/dirtyd77/J6ZYu/3/

很抱歉很长的解释！希望这有帮助，如果您有任何问题，请告诉我们！

迭代jQuery中多个选择框的选项

1 个答案: