多個下拉框？

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