如何创建根据另一个下拉菜单中的答案显示的下拉菜单

How to create dropdown menu that appears based on answer from another dropdown menu

本文关键字：下拉菜单 另一个 显示 答案 何创建 创建      更新时间：2023-09-26

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

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

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

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

谢谢你的帮助！

EDIT-我使用Django/Python与HTML、CSS和Javascript一起构建这个网站。

您可以使用HTML和JavaScript的组合（JSFIDDLE）：

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

这样？创建了一个js小提琴。http://jsfiddle.net/wigster/MeTQQ/

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

如果您希望使用jQuery，可以使用以下测试用例：http://jsfiddle.net/exXmJ/

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

相关文章：