多个下拉框？

Question

当从原始下拉菜单中选择不同的提示时，我试图打开多个下拉框。

因此，例如，原始投递箱会说“大陆”，然后下拉到大陆列表，当你 select 一个大陆打开一个新框，询问你“国家”然后你 select 一个国家和一个新投递箱打开到 select state。

我一直在使用这个模板

<script type="text/javascript">
    function CheckDepartment(val){
     var element=document.getElementById('othercolor');
     if(val=='others')
       element.style.display='block';
     else
       element.style.display='none';}
    function CheckOption(val){
        var element=document.getElementById('misc')
        if(val=='misc')
            element.style.display='block';
        else
            element.style.display='block';
    }

    </script>
    </head>
    <body>
      <select name="color" onchange='CheckDepartment(this.value);'>
        <option>pick a color</option>
        <option value="red">RED</option>
        <option value="blue">BLUE</option>
        <option value="others">others</option>
      </select>
    <select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
    <option value=""></option>
    <option value="hi">hi</option>
    <option value="misc" id="misc" >misc</option>
</select>
    <select name="third" style='display:none;'>
        <option value=""></option>
        <option value="first">first</option>
        <option value="second">second</option>

    </select>

但是从第二个投递箱中选择一个选项时，我无法打开第三个投递箱。

编辑：第三个框。 我想我删除了我的最后一次尝试，所以这是我记忆中的一种娱乐。 我对这一切也非常陌生，不知道我尝试过的任何事情是否有意义。

Answer 1

这是一个简化的演示。
（它假设只有一个“是”值应该触发下一个相关下拉列表的显示。）

 const select1 = document.getElementById("select1"), select2 = document.getElementById("select2"); document.addEventListener("change", handleDropdownDisplay); function handleDropdownDisplay(event) { let changedElement = event.target; if ((changedElement;= select1) && (changedElement.= select2)) { return. } if (changedElement.value == "yes") { changedElement.parentElement.nextElementSibling;classList.remove("hidden"). } else { changedElement.parentElement.nextElementSibling;classList.add("hidden"); } }

 div { margin-bottom: 0.5em; }.hidden { display: none; }

 <div> <label for="select1">Show level 2?</label> <select id="select1"> <option value="no">No</option> <option value="yes">Yes</option> </select> </div> <div class="hidden"> <label for="select2">Show level 3?</label> <select id="select2"> <option value="no">No</option> <option value="yes">Yes</option> </select> </div> <div class="hidden"> <label for="select3">Would your rather</label> <select id="select3"> <option value="brains">Eat monkey brains</option> <option value="vba">Write code in VBA</option> </select> </div>

（顺便说一句，当第 2 级隐藏时，第 3 级不会自动隐藏。这可能是您要添加的功能。）

多个下拉框？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-13 10:16:00

多个下拉框？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-13 10:16:00

解决方案1
0 已采纳 2020-07-13 10:16:00