Question

如果我从第一个下拉列表中选择值1，则应该从第二个下拉列表中隐藏值4。同样，如果我从第一个下拉列表中选择值2，它应该从第二个下拉列表中隐藏值5。我试过这个。但无法得到正确的答案。主要是它应该在IE 8中工作。我需要纯粹的JavaScript代码。没有jquery。

HTML CODE：

<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>

SCRIPT：

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;
    }
}

Answer 1

对于基本功能，您应该在不同情况下更正ID，因为它们现在是错误的。要获得完整的功能，你必须注意其他一些事情：

在现代浏览器中，如果选项标签没有值属性，则将html视为值，但在IE8中，它将为空字符串，因此您需要在每个选项元素上添加值属性。
例如 - 如果从第一个下拉列表中选择了值3，您应该会看到第二个下拉列表中的两个值，因此您可以选择“值5”和“＃”。例如。现在，如果您从第一个下拉列表中更改选项，但不允许使用值5＆＃39;在下拉值中，它将被隐藏，但如果掺杂被折叠，则会显示。
如果您在现代浏览器中为某些选项将显示设置为无，则此选项在您展开下拉列表时不显示，但IE不关心此显示值。我建议的一些解决方法是设置禁用属性，以便您可以看到隐藏的＆＃39;值，但你不能选择它们。另一种方法可能是删除html dom元素并在需要时再次添加它们，但这将是一个更难实现。
将脚本部分放在文档加载事件中是合理的，这样可以确保在您尝试附加事件时加载元素。

<强> 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

在IE 8中启用/禁用javascript中的下拉值

1 个答案: