Javascript 如何创建基于另一个下拉菜单的答案显示的下拉菜单

我正在尝试创建一个页面，在该页面中，用户必须根据彼此做出多个选择。如何创建表单，以便根据用户在下拉菜单1中的选择显示特定类型的下拉菜单2

例如，假设用户必须选择产品类别和产品子类别。如果用户从第一个下拉菜单中选择床上用品，则会自动显示第二个下拉菜单，其中包含床、床垫、枕头等选项

为了进一步说明这个例子，假设用户选择了电子设备而不是床上用品。然后，第二个下拉菜单将有电视、mp3播放器、电脑等选项

一个人怎么做那样的事呢？这是你用HTML/CSS或其他形式做的事情吗

谢谢你的帮助

---

编辑-我正在使用Django/Python与HTML、CSS和Javascript一起构建此网站。

您可以使用HTML和Javascript的组合：

---

像这样？创建了一个js小提琴。

---

它获取下拉框的值，然后如果它与规则匹配，它将设置另一个下拉框显示，如果不匹配，则将另一个下拉框隐藏。

如果您希望使用jQuery，可以使用此测试用例：

---

在我看来，有两条路要走。删除下拉列表并将其替换为新下拉列表，或隐藏/显示两个不同的下拉列表。Alexander介绍了第二种方法，所以我不想深入讨论。

这是一个不错的起点+1，但他可能需要更多的解释。为输入喝彩-添加了一个简短的描述-增加了。旁注：我不会完全照搬Alexander的示例，主要是因为它使用内联css。您应该将css放在样式表中，以将设计与标记分开。虽然事件监听器可能比onclick=attribute更好，但实际的方法是可以的？我知道如何在HTML中实现，但在JS代码中，是将其保留在如图所示的位置，还是它也调用样式表？@wordman我不太清楚你的意思，你能链接你的代码吗？@amiregelz，我指的是上面的代码以及JavaScript如何处理CSS。具体来说，can document.getElementByIdf1.style.display=block；是否可以采取不同的做法？它看起来是碎片编码的，可以调用样式表中的另一个元素吗？

<select id="opts" onchange="showForm()">
    <option value="0">Select Option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

<div id="f1" style="display:none">
    <form name="form1">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1">Option 1A</option>
            <option value="2">Option 1B</option>
        </select>
    </form>
</div>

<div id="f2" style="display:none">
    <form name="form2">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1">Option 2A</option>
            <option value="2">Option 2B</option>
        </select>
    </form>
</div>

<script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("opts").value;
        if (selopt == 1) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
        }
        if (selopt == 2) {
            document.getElementById("f2").style.display = "block";
            document.getElementById("f1").style.display = "none";
        }
        if (selopt == 0) {
            document.getElementById("f2").style.display = "none";
            document.getElementById("f1").style.display = "none";
        }
    }
</script>