文章/答案/技术大牛

发布

社区首页 >问答首页 >多个下拉框？

问多个下拉框？
EN

Stack Overflow用户

提问于 2020-07-13 09:21:05

回答 1查看 121关注 0票数 0

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

例如，原来的下拉框会说“欧洲大陆”，然后下降到一个大陆列表，当你选择一个大陆时，打开一个新的框，要求你“国家”，然后你选择一个国家，然后打开一个新的下拉框来选择一个国家。

我一直在使用这个模板

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

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

编辑:第三个框。我想我删除了我的最后一次尝试，所以这是我记忆中的一种消遣。我在所有这些方面都是非常新的，我不知道我尝试过的任何东西是否有意义。

dynamic

dropdown

dropbox

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-13 10:16:00

这里是一个简化的演示.

(它假设只有“是”值才能触发下一个依赖下拉列表的显示。)

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>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62872862

复制

相似问题

问多个下拉框？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个下拉框？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个下拉框？
EN