如果我从第一个下拉列表中选择值1,它应该从第二个下拉列表中隐藏值4。类似地,如果我从第一个下拉列表中选择值2,它应该从第二个下拉列表中隐藏值5。我试过了。但无法得到正确的答案。主要应该在IE8中工作。
我需要纯javascript代码。没有jquery。
HTML代码:
<select id="first" onchange="changeval(this)">
<option id="all1">value 1</option>
<option id="all2">value 2</option>
<option id="all3">value 3</option>
</select>
<select id="second">
<option id="all4">value 4</option>
<option id="all5">value 5</option>
</select>
脚本:
function changeval(obj) {
switch (obj.value) {
case 'value 1':
document.getElementById('all1').style.display = 'block';
document.getElementById('all4').style.display = 'none';
break;
case 'value 2':
document.getElementById('all3').style.display = 'none';
document.getElementById('all4').style.display = 'block';
break;
default:
document.getElementById('all3').style.display = 'block';
break;
}
}
最佳答案
对于基本功能,您应该在不同的情况下更正id,因为它们现在是错误的。为了充分发挥功能,你必须注意以下几点:
在现代浏览器中,如果option标记没有value属性,它们将html作为值,但是在IE8中它将是空字符串,因此需要在每个option元素上添加value属性。
例如-如果从第一个下拉列表中选择值3,则应在第二个下拉列表中同时看到两个值,以便可以选择“值5”作为示例。现在,如果从第一个下拉列表中更改不允许在下拉列表值中使用“值5”的选项,则该选项将被隐藏,但在dopdown折叠时将显示。
如果在现代浏览器中将某个选项的“显示”设置为“无”,则在展开下拉列表时不会显示此选项,但IE不关心此显示值。我建议的一些解决方法是设置disabled属性,以便可以看到“hidden”值,但不能选择它们。另一种方法可能是删除html dom元素,并在需要时再次添加它们,但这将是一个比较困难的实现。
将脚本部分放在document load事件中是预先准备好的,这样您就可以确保在尝试附加元素事件时加载了元素。
HTML格式
<select id="first" onchange="changeval(this)">
<option id="all1" value="value 1">value 1</option>
<option id="all2" value="value 2">value 2</option>
<option id="all3" value="value 3">value 3</option>
</select>
<select id="second">
<option id="all4" value="value 4">value 4</option>
<option id="all5" value="value 5">value 5</option>
</select>
JavaScript
function changeval(obj) {
var selectedIsHidden = false;
var all4option = document.getElementById('all4');
var all5option = document.getElementById('all5');
switch (obj.value) {
case 'value 1':
selectedIsHidden = all4option.selected;
all4option.style.display = 'none';
all4option.disabled = true;
all5option.style.display = 'block';
all5option.disabled = false;
break;
case 'value 2':
selectedIsHidden = all5option.selected;
all4option.style.display = 'block';
all4option.disabled = false;
all5option.style.display = 'none';
all5option.disabled = true;
break;
default:
all4option.style.display = 'block';
all4option.disabled = false;
all5option.style.display = 'block';
all5option.disabled = false;
break;
}
// Select the first option with display different than none
// when we must hide the currently selected option
if(selectedIsHidden) {
var secondDropDown = document.getElementById('second');
for(var i = 0; i < secondDropDown.options.length; i++) {
if(secondDropDown.options[i].style.display !== 'none') {
secondDropDown.options[i].selected = true;
break;
}
}
}
}
// Call the changeVal function manually to ensure that selected value
// on the second drop down will be valid even after load.
changeval(document.getElementById('first'));
小提琴
Demo