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

Question

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

javascriptpythonhtmlcss

7

我正在尝试创建一个页面，让用户进行多个基于彼此的选择。如何创建表单，以便特定类型的下拉菜单#2基于用户在下拉菜单#1中的选择而出现。

例如，假设用户必须选择“产品类别”和“产品子类别”。如果用户从第一个下拉菜单中选择了“床上用品”，那么第二个下拉菜单将自动显示出像“床、床垫、枕头”这样的选项。

进一步说，假设用户选择了“电子产品”而不是“床上用品”。那么第二个下拉菜单将有像“电视、MP3播放器、计算机”这样的选项。

如何实现这样的功能？这是在HTML/CSS或其他形式中完成的吗？

感谢您的帮助！

编辑-我正在使用Django/Python构建此网站，以及HTML、CSS和Javascript。

- goelv

3个回答

3

像这样？创建了一个js演示。 http://jsfiddle.net/wigster/MeTQQ/

它获取下拉框的值，如果符合规则，则设置另一个下拉框显示，否则保持该下拉框隐藏。

- Alexander Wigmore

2

不错的起点+1，但可能需要更详细的解释。 - AlexMA

感谢您的输入 - 添加了简要描述 - 提高了。 - Alexander Wigmore

1

如果您想使用jQuery，可以使用以下测试案例：http://jsfiddle.net/exXmJ/ 我认为有两种方法可供选择。一是删除下拉菜单并替换为新的，二是隐藏/显示两个不同的下拉菜单。Alexander已经介绍了第二种方法，所以我就不再赘述了。

- thomasmyrman

附注：我不会完全按照Alexander的示例使用，主要是因为它使用了内联CSS。您应该将CSS放在样式表中，以区分设计和标记。实际方法还可以，尽管事件监听器可能比onclick =“”属性更好。 - thomasmyrman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- amiregelz · Accepted Answer

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