如果我从第一个下拉列表中选择值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

10-05 20:58
查看更多