如何在使用Javascript禁用下列下拉菜單中選擇值

Question

function preventDupes(select, index) { 
    var options = select.options, 
     len = options.length; 
    while(len--) { 
     options[ len ].disabled = false; 
    } 
    select.options[ index ].disabled = true; 
     if(index === select.selectedIndex) { 
     alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.'); 
     this.selectedIndex = 0; 
    } 

} 

var select1 = select = document.getElementById('select1'); 
var select2 = select = document.getElementById('select2'); 
var select3 = select = document.getElementById('select3'); 
var select4 = select = document.getElementById('select4'); 
var select5 = select = document.getElementById('select5'); 

select1.onchange = function() { 
    preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select2.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select3.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select4.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select5.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
}; 

我試圖禁用已經選擇的下拉字段，但是它禁用了最後選擇的下拉值。我想要的是什麼;

當用戶第一次選擇會計時，應該在其他4個下拉列表中禁用該選項。然後如果用戶選擇生物學，則生物學和會計必須在其他3個下拉列表中禁用。因此，用戶可以設置前五個選項

Answer 1

如果您想查看運行中的代碼，我有prepared a fiddle。

它減少了很多來自onchange處理程序的重複問題。

爲了可讀性，我已拆分了的代碼劃分成多個部分：

0）定義jQuery選擇，使得一個不必重複代碼：

var selects = '#first, #second'; 

1）持續選定陣列內的值：

var selectedValues = []; 

2）更新所選擇的值：

var updateSelected = function() { 
    selectedValues = []; 
    jQuery(selects).each(function() { 
    selectedValues.push(jQuery(this).val()); 
    }); 
} 

3）禁用其中一個選擇中已經選擇的選項。所選擇的選項本身從不禁用，因爲這對用戶來說看起來很奇怪，並且會導致瀏覽器在表單提交時不發送值。

var disableOptions = function() { 
    jQuery(selects).each(function() { 
    var select = this; 
    $(this).children('option').each(function() { 
     if (selectedValues.indexOf($(this).val()) > -1 && $(select).val() != $(this).val()) { 
     $(this).attr('disabled', true); 
     } else { 
     $(this).removeAttr('disabled'); 
     } 
    }); 
    }); 
} 

4）onChange處理

jQuery(selects).change(function(event) { 
    updateSelected(); 
    disableOptions(); 
});