如何在javascript中禁用多个选定下拉值

我有一个添加按钮，如果我点击它，它会生成一个新行，有一个下拉列表（允许多选），现在如果我在下拉列表中选择了一些值，如果我下次再次按下添加按钮，它会生成 新行中有相同的下拉列表，但我希望用户不能在新创建的下拉列表中选择以前选择的项目。即，每个下拉列表都应选择唯一的值

<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>

苹果
梨
香蕉
橙色
苹果
梨
香蕉
橙色
苹果
梨
香蕉
橙色

---

如果在第一个下拉列表中选择了apple、pear，那么在接下来的两个下拉列表中，apple选项应被禁用并用红色着色。

这将让您了解如何开始：

//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);

//取消给定事件
功能取消事件（ev）{
ev.preventDefault（）；
ev.returnValue=false；
ev.cancelBubble=true；
返回false；
}
功能检查选择（e）{
var oSel=e.target
var oPrvSel；
对于（var i=0；i