两个下拉菜单答案

【问题标题】：Two Drop Down Menus两个下拉菜单
【发布时间】：2021-09-06 14:11:54
【问题描述】：

我希望我可以使用 jQuery，但这必须在 JavaScript 中。我会很感激帮助。选择“空”（第一个下拉菜单）时，我需要第二个下拉菜单（A，B，C）的所有值。选择“1”时，我只需要a，b。选择“2”时，我只需要B，C。

下拉菜单没有问题。只需要改变价值观。我将如何在 JavaScript 中解决这个问题？

第一个菜单

<onchange="first(this);>
<option value="empty"></option>
<option value="1">1</option>
<option value="2">2</option>

二级菜单

<id="second">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>

【问题讨论】：

你已经写过 JavaScript 了吗？

标签： javascript drop-down-menu

【解决方案1】：

我更喜欢的一个解决方案是通过 JS 中的 CSS 将样式设置为无。这样，元素仍然存在，但只是对查看者隐藏。

您可以通过[element-here].value 获取元素的值，并将其与您想要的某个值进行比较。从那里，您将选择您拥有的第二个下拉选项值并运行[element-here].style.display = "none"

我不推荐的另一种更复杂的方法是完全创建和销毁元素。比如：

var x = document.createElement("option");
x.value = VALUE HERE;
parent.appendChild(document.createTextNode("TEXT HERE"))

【讨论】：

太棒了。我最大的问题是每次我单击第一个下拉菜单中的任何内容时，第二个下拉菜单值都会消失。但是，我的 CSS 不太好……你能再深入一点吗……？
您是否设置了一个监听器来检测第一个下拉菜单中的变化？如果没有，第二个下拉菜单可能只会在执行时更新，但不会再次更新。项目可能消失的另一个原因是因为在选择第一个菜单中的新项目后，我忘记添加代码以“重新启用”可见性，或者可能选择了第二个下拉菜单中的错误元素。为此，请使用 [element-here].style.display = "" 而不是 "none"。例如：if (dropdown1.value == 1){ a.style.display = ""; b.style.display = ""; c.style.display = "none";

【解决方案2】：

这有点草率，但这是一种方法。您有一个数据数组，其中每个主值都有有效的次要值。然后在每次主列表更改时渲染它们。

let dropdownlist = [];
dropdownlist[1] = ['a', 'b', 'c'];
dropdownlist[2] = ['b', 'c'];

let select = document.createElement('select');

document.getElementById('myItemList').appendChild(select);

let x = 1;

document.getElementById('firstddl').addEventListener('change', (e) => {
  //console.log(e.target.value);
  x = e.target.value;
  select.innerHTML = '';
  renderDDL(dropdownlist, x)

});

function renderDDL(dropdownlist, x) {
  dropdownlist[x].forEach(function(item) {
    let option = document.createElement('option');
    select.appendChild(option);

    option.innerHTML += item;
  });
}

renderDDL(dropdownlist, x); // Runs once

<select id="firstddl">
  <option value=1>1</option>
  <option value=2>2</option>
</select>


<div id="myItemList">

</div>

【讨论】：