我在 html 中有 7 个下拉框。它们都将填充相同的数据。我想要做的是,当第一个下拉列表被选中时,它会从下一个下拉列表中删除选定的项目。因此,如果您有数据:A、B、C、D、E、F、G、H、I 在一个下拉列表中,如果我在第一个下拉列表中选择 B,那么在下一个下拉列表中它应该只显示 A、C、D ,E,F,G,H,I 等最多 7 个下拉菜单。我不知道在 JavaScript 中解决这个问题的最佳方法是什么。示例代码:下面的代码在我的电脑上的 IE7 和 IE8 上不起作用,任何人都知道我必须对其进行哪些更改才能使用此代码.. 提前感谢您的帮助
function callSave(select) {
var parent = select.parentNode;
var usedValues = {};
for (var i = 0; i < parent.children.length; ++i) {
var s = parent.children[i];
if (s.nodeName.toLowerCase() != 'select') {
continue;
}
if (s.value != '') {
usedValues[ s.value ] = s;
}
}
for (var i = 0; i < parent.children.length; ++i) {
var s = parent.children[i];
if (s.nodeName.toLowerCase() != 'select') {
continue;
}
for (var j = 0; j < s.children.length; ++j) {
var o = s.children[j];
if (o.nodeName.toLowerCase() != 'option') {
continue;
}
var p = o.value == '' ? undefined : usedValues[o.value];
if (p == undefined || p == s) {
o.style.display = '';
}
else {
o.style.display = 'none';
}
}
}
}
HTML:
<div>
<select onChange="callSave(this)">
<option></option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>
<select onChange="callSave(this)">
<option></option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>
<select onChange="callSave(this)">
<option></option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>
<select onChange="callSave(this)">
<option></option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>