遍历jQuery中多个选择框的选项 [英] Iterating over options from multiple select boxes in jQuery

问题描述

我有几个选择框(确切的数字是动态的)，每个选择框都包含相同的值.在一个框中选择一个选项后，我想在所有其他选择框中将该值disable.

I have several select boxes (the exact number is dynamic), each containing the same values. When an option is selected in one box, I want to disable this value in all the other select boxes.

如该 jsFiddle 所示，当您在第一个选择框中选择一个值时，它会在第二个选择框中正确禁用该值.当您在第二个选择框中选择一个值时，代码将在第一个选择框中正确禁用该值；但是，它启用(即不禁用)从第二个框中的第一个选择框中选择的原始值.

As shown in this jsFiddle, when you select a value in the first select box, it correctly disables that value in the second select box. When you select a value in the second select box, the code correctly disables that value in the first select box; however, it enables (i.e. does not disable) the original selected value from the first select box, in the second box.

要复制::在第一个选择框中选择Value One.在第二个选择框中正确禁用了Value One.现在，在第二个选择框中选择Value Two.在第一个选择框中已禁用该功能，但现在在第二个选择框中已错误地启用了Value One.

To replicate: select Value One for the first select box. Value One is correctly disabled in the second select box. Now select Value Two in the second select box. It's disabled in the first select box, but now Value One is incorrectly enabled in the second select box.

经过数小时的尝试诊断问题后，看来我的.each语句仅处理第一个选择框，而没有前进到第二个选择框以对其值进行迭代. 编辑:实际上，它不会停止处理；如果您从jsFiddle(启用不再被选择的值的else语句)中删除第22-24行，然后在第一个选择框中选择Value One然后选择Value Three，代码将正确处理第二个选择框并禁用Value One和Value Three.因此，在selectedAreas上进行多次迭代是一个问题吗?

After hours of trying to diagnose the issue, it seems that my .each statement only processes the first select box, and does not advance to the second select box to iterate over it's values. Actually it doesn't stop processing; if you remove line 22-24 from the jsFiddle (the else statement that enables the values that are no longer selected), and then select Value One then Value Three in the first select box the code correctly processes the second select box and disables Value One and Value Three. So it's a problem with the multiple iterations over selectedAreas?

如何使用area_select类迭代页面上所有选择框中的所有选项?

How can I iterate over all the options from all the select boxes on the page with my area_select class?

我的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;
}

推荐答案

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

Okay this is a little complicating but I will do my best to explain what is going on here.

主要问题源于以下陈述:

The main problem stems from the following statement:

$('.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

您遍历当前未选择的每个选项:

You iterate through each option not currently selected:

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中的每个单独的值，然后说

you then go through each individual value in selectedAreas and say

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

if the selectedArea value is equal to the current option then disable it, or else enable it

现在看看当您遍历每个值时会发生什么:

Now look what happens when you go through each value:

如果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)

如果Option等于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/

很抱歉，冗长的解释！希望这对您有所帮助，让我知道！

Sorry for the long explanation! Hope this helps and let me know if you have any questions!

这篇关于遍历jQuery中多个选择框的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！