如何在JavaScript中禁用多個選定的下拉值

Question

我有一個添加按鈕，如果我點擊它然後它會生成一個新的行有一個下拉（允許多個選擇），現在如果我已經選擇下拉列表中的某個值下一次，如果我再次按下添加按鈕，它會在一個新行中生成相同的下拉菜單 ，但我希望用戶不應該能夠選擇新創建的dropdown.ie中的以前選擇的項目。每個下拉菜單應該選擇唯一的值。

<select multiple="true" id="mySelect[0]"> 
    <option value="1" >Apple</option> 
    <option value="2">Pear</option> 
    <option value="3">Banana</option> 
    <option value="4">Orange</option> 
</select> 
<select multiple="true" id="mySelect[1]"> 
    <option value="1" >Apple</option> 
    <option value="2">Pear</option> 
    <option value="3">Banana</option> 
    <option value="4">Orange</option> 
</select> 
<select multiple="true" id="mySelect[2]"> 
    <option value="1" >Apple</option> 
    <option value="2">Pear</option> 
    <option value="3">Banana</option> 
    <option value="4">Orange</option> 
</select> 

如果蘋果，梨在第一個下拉菜單中被選中，那麼在下兩個下拉蘋果選項中應該禁用紅色。

Answer 1

這應該給你如何開始一個好主意：

//cancels given event 
function cancelEvent(ev) { 
    ev.preventDefault(); 
    ev.returnValue = false; 
    ev.cancelBubble = true; 
    return false; 
} 

function checkSelection(e) { 
var oSel = e.target 
var oPrvSel; 

    for(var i=0; i<e.target.index; i++) { 
     oPrvSel = document.getElementById("mySelect[" + i + "]"); 
     for(var j=0; j<oPrvSel.options.length; j++) { 
      if (oPrvSel.options[j].text == e.target.options[e.target.selectedIndex].text) return cancelEvent(e); 
     } 
    } 

} 



//at instanciation of new elements: 
var oSel = document.getElementById("mySelect[" + i + "]"); 
oSel.index = i; 
oSel.addEventListener("keydown", checkSelection, false);