多个下拉框？

Question

I'm trying to get multiple drop down boxes to open when selecting different prompts from an original drop down menu.当从原始下拉菜单中选择不同的提示时，我试图打开多个下拉框。

So for example the original drop box would say "Continent" then drop down to a list of continents, when you select a continent a new box opens that asks you "Country" then you select a country and a new drop box opens to select a state.因此，例如，原始投递箱会说“大陆”，然后下拉到大陆列表，当你 select 一个大陆打开一个新框，询问你“国家”然后你 select 一个国家和一个新投递箱打开到 select state。

I've been using this template我一直在使用这个模板

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

but I can't get a third drop box to open when selecting an option from the second drop box.但是从第二个投递箱中选择一个选项时，我无法打开第三个投递箱。

edit: third box.编辑：第三个框。 I think i deleted my last try so this was kinda a recreation of it from what I remembered.我想我删除了我的最后一次尝试，所以这是我记忆中的一种娱乐。 I'm also incredibly new at all of this and don't know if anything I tried makes sense.我对这一切也非常陌生，不知道我尝试过的任何事情是否有意义。

Answer 1

Here's a simplified demo.这是一个简化的演示。
(It assumes only a "yes" value should trigger the display of the next dependent dropdown.) （它假设只有一个“是”值应该触发下一个相关下拉列表的显示。）

 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>

(Btw, level 3 doesn't automatically become hidden whenever level 2 becomes hidden. This is probably functionality you'll want to add.) （顺便说一句，当第 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