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

简言之，当选择选项<代码>字母<代码>时，仅显示所选内容<代码>字母<代码>；当选择选项<代码>数字<代码>时，所选内容<代码>数字<代码>出现，<代码>字母<代码>消失且<代码>数字<代码>已启用

任何帮助都将不胜感激。谢谢

这在开始时是可见的：

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

---

如果我理解得很好，你想创建一个依赖的选择框吗？如果你选择了第一个选项，那么你会有更多的选项

---

我想这会有帮助的。它是用jQuery制作的。非常整洁。

我建议您使用

jQuery

（）并尝试以下代码：

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

//加载页面后绑定所有事件
$（文档）.ready（函数（）{
$（'#test'）。每次用户在测试中选择一个选项时更改（函数（）{//）
$（'.yourSelect'）.hide（）；//隐藏所选类的所有
$（'#'+$（this.val（））.show（）；//使用在测试中选择的id显示
});
});

---

工作小提琴：

这是最简单的-

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

.hide {
    display:none;
}

---

发布到目前为止还不起作用的JS代码。你能使用jQuery吗？或者您只想使用JavaScript执行此操作？亲爱的@Yasser为什么删除我的问候语？这是不是禁止我希望我对别人有用，后面跟着我的名字？这不是必须的。请查看常见问题。@Yasser，已经找到了，但没有找到任何东西。你能告诉我你的消息来源吗？我的坏消息在常见问题中也找不到。但是在这里找到的-

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 {
    display:none;
}