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

前端之家收集整理的这篇文章主要介绍了javascript – 如何根据另一个下拉菜单中的答案创建显示的下拉菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个页面,用户必须根据彼此进行多项选择.如何创建一个表单,以便根据用户在下拉菜单#1中的选择显示特定类型的下拉菜单#2.

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

为了进一步说明这个例子,假设用户选择“电子产品”而不是“床上用品”.然后第二个下拉菜单会有“电视,MP3播放器,电脑”等选项.

怎么会这样做呢?你会用HTML / CSS或其他形式做些什么吗?

谢谢您的帮助!

编辑 – 我正在使用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>
原文链接:https://www.f2er.com/js/150818.html

猜你在找的JavaScript相关文章