两个下拉菜单

Question

我希望我可以使用 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>

Answer 1

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

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

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

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

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