迭代jQuery中多个选择框的选项
我有几个选择框（确切的数字是动态的），每个框都包含相同的值。 当在一个框中选择一个选项时，我想在所有其他选择框中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; }
好的，这有点复杂，但我会尽力解释这里发生了什么。
主要问题源于以下声明：
$('.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/
很抱歉很长的解释！ 希望这有帮助，如果您有任何疑问，请告诉我！