我有一个添加按钮,如果我点击它然后它生成一个新的行有一个下拉列表(允许多个选择),现在如果我在下拉列表中选择了一些值,如果我再次按下添加按钮它将生成 新行中的相同下拉菜单,但我希望用户不应该在新创建的dropdown中选择以前选择的项目。每个下拉列表都应该选择唯一的值。
<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>
如果苹果,梨在第一次下拉选择,那么在接下来的两个下拉苹果选项应该被禁用并用红色着色。
答案 0 :(得分:0)
这应该让你知道如何开始:
//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);