0

いくつかの選択ボックスがあり (正確な数は動的です)、それぞれに同じ値が含まれています。あるボックスでオプションが選択されてdisableいる場合、他のすべての選択ボックスでこの値が必要です。

このjsFiddleに示すように、最初の選択ボックスで値を選択すると、2 番目の選択ボックスでその値が正しく無効になります。2 番目の選択ボックスで値を選択すると、コードは最初の選択ボックスでその値を正しく無効にします。ただし、2 番目のボックスで最初の選択ボックスから選択された元の値を有効にします (つまり、無効にはしません)。

複製するには:最初の選択Value Oneボックスを選択します。Value One2 番目の選択ボックスで正しく無効になっています。次にValue Two、2 番目の選択ボックスで選択します。最初の選択ボックスでは無効になっていますValue Oneが、2 番目の選択ボックスでは誤って有効になっています。

何時間も問題を診断しようとした後、私の.eachステートメントは最初の選択ボックスのみを処理し、2 番目の選択ボックスに進んでその値を反復処理していないようです。編集：実際には処理を停止しません。jsFiddle (選択されなくなった値を有効にする else ステートメント) から 22 ～ 24 行目を削除し、最初の選択ボックスで選択するとValue One、Value Threeコードは 2 番目の選択ボックスを正しく処理し、無効に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;
}
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);    
        }
    }       
});

2 つの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 に答える