JavaScript-多个select 如何使用js 控制select 不能选择重复的值
多个select 如何使用js 控制select 不能选择重复的值，在网上找到了一段代码 是控制2个select标签的 但是如果是4个select标签 该怎么写代码
附：网上找到的控制2个select标签不能选择相同的值的代码
<html>
<head>
<title>禁止选择相同值的Select下拉列表</title>
</head>
<script>
var OptLstTxt = new Array;
var OptLstVal = new Array;
var OptLen = 0;
function NoDupl(SelObjFrom, SelObjTo) {
var OldToVal = SelObjTo.options[SelObjTo.selectedIndex].value;
if (OptLen == 0) {
OptLen = SelObjFrom.length;
for (var i = 1; i < OptLen; i++) {
OptLstTxt[i] = SelObjFrom.options[i].text;
OptLstVal[i] = SelObjFrom.options[i].value;
}
}
var j = 1;
for (var i = 1; i < OptLen; i++) {
if (OptLstVal[i] != SelObjFrom.options[SelObjFrom.selectedIndex].value) {
if (j == SelObjTo.length) {
SelObjTo.options[j] = new Option(OptLstTxt[i]);
}
else {
SelObjTo.options[j].text = OptLstTxt[i];
}
SelObjTo.options[j].value = OptLstVal[i];
if (OptLstVal[i] == OldToVal) {
SelObjTo.selectedIndex = j;
}
j++;
}
}
if (SelObjTo.length > j)
SelObjTo.options[(SelObjTo.length - 1)] = null;
}
</script>
</head>
<body>
<form method="POST" name="MForm">
<div align="center">两个下拉框你只能选择不同的值<br>
<select name="Color_1" onChange="NoDupl(this,document.MForm.Color_2)">
<option selected value=''>你的WEB编程语言</option>
<option value='ASP'>ASP</option>
<option value='PHP'>PHP</option>
<option value='JSP'>JSP</option>
<option value='CGI'>CGI</option>
</select>
<select name="Color_2" onChange="NoDupl(this,document.MForm.Color_1)">
<option selected value=''>你的WEB编程语言</option>
<option value='ASP'>ASP</option>
<option value='PHP'>PHP</option>
<option value='JSP'>JSP</option>
<option value='CGI'>CGI</option>
</select>
</div>
</form>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我的想法是：
利用javascript的事件委托机制，在多个select元素的上层元素上绑定一个change事件，这样所有的select只有触发出change事件都会随事件冒泡而被上层容器所捕获。然后你要做的就是将其余select中的相同的option给隐藏掉（应该可以隐藏吧，没测试过）或者是直接跳到--empty--。