如何创建基于另一个下拉菜单的答案出现的下拉菜单

Posted 2023-02-23

【中文标题】如何创建基于另一个下拉菜单的答案出现的下拉菜单

【英文标题】：How to create dropdown menu that appears based on answer from another dropdown menu

【发布时间】：2012-08-01 00:04:55

【问题描述】：

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

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

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

如何去做这样的事情？你会用 html/CSS 或其他形式做些什么吗？

感谢您的帮助！

编辑 - 我正在使用 Django / Python 以及 HTML、CSS 和 javascript 来构建这个网站。

【参考方案1】：

您可以结合使用 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>

【讨论】：

如何使用外部 CSS 编写上述内容？我知道如何在 HTML 中做到这一点，但在 JS 代码中，是把它留在如图所示还是它也调用样式表？

@wordman 我不太清楚你的意思，你能链接你的代码吗？

@amiregelz，我指的是上面的代码以及 JavaScript 如何处理 CSS。具体来说，document.getElementById("f1").style.display = "block"; 可以做不同的事情吗？看起来是硬编码的，可以调用样式表中的另一个元素吗？

【参考方案2】：

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

它抓取下拉框的值，然后如果它符合规则，它将设置另一个下拉框显示，如果不，则隐藏另一个下拉框。

【讨论】：

不错的起点+1，但他可能需要更多解释。

为输入干杯 - 添加了简短描述 - 已更新。

【参考方案3】：

如果你想使用 jQuery，你可以使用这个测试用例： http://jsfiddle.net/exXmJ/

在我看来，有两条路可以走。删除下拉菜单并将其换成新的，或隐藏/显示两个不同的下拉菜单。 Alexander 介绍了第二种方法，所以我不再赘述。

【讨论】：

旁注：我不会完全按原样使用 Alexander 的示例，主要是因为它使用内联 css。您应该将 css 放在样式表中以将设计与标记分开。实际的方法是可以的，尽管事件监听器可能比 onclick="" 属性更好。