0

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

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

复制：选择Value One第一个选择框。Value One在第二个选择框中正确禁用。现在Value Two在第二个选择框中选择。它在第一个选择框中被禁用，但现在Value One在第二个选择框中被错误地启用。

经过数小时尝试诊断问题后，我的语句似乎.each只处理第一个选择框，并没有前进到第二个选择框来迭代它的值。编辑：实际上它并没有停止处理；如果从 jsFiddle 中删除第 22-24 行（启用不再选择的值的 else 语句），Value One然后Value Three在第一个选择框中选择，则代码正确处理第二个选择框并禁用Value Oneand 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;
}
4

1 回答 1

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/

抱歉，解释太长了！希望这会有所帮助，如果您有任何问题，请告诉我！

于 2013-03-28T17:18:34.600 回答