Question

简而言之，只有在选择了#letters选项时才会显示选择letters，当选择#numbers时，选择numbers会出现，#letters消失和#numbers已启用？

非常感谢任何帮助。谢谢！

这在开头可见：

<select id="test">
    <option value="letters">letters</option>
    <option value="numbers">numbers</option>
</select>

点击letters展示或启用#letters并在选择#numbers后显示numbers：

<select id="letters">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
<select id="numbers">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Answer 1

如果我做得好，你想创建一个从属选择框？如果您选择第一个选项，那么您将有更多选择。

我认为tutorial可以提供帮助。它是用jQuery制作的。非常整洁。

Answer 2

我建议您使用jQuery（more information）并尝试以下代码：

// bind all events AFTER the page is loaded
$(document).ready(function () {
    $('#test').change(function () {     // every time the user selects an option in your test <select>
        $('.yourSelect').hide();        // hide all <select>s with the class yourSelect
        $('#'+$(this).val()).show();    // show the <select> with the id selected in test
    });
});

工作小提琴：http://jsfiddle.net/myx7S/1/

Answer 3

这很简单 - http://jsfiddle.net/yrshaikh/CBDaS/

function doSomething(){
    var selection = document.getElementById('test').value
    if(selection == "numbers") {        
        document.getElementById('letters').className = 'hide';
        document.getElementById('numbers').className = '';
    }
    else {
        document.getElementById('letters').className = '';
        document.getElementById('numbers').className = 'hide';
    }
}

和当然，其中.hide是一个css类：

.hide {
    display:none;
}

在Javascript上单击其他选项时显示和隐藏选择

3 个答案: