javascript - 当另一个选择中的另一个选项被选中时，在选择元素中隐藏/显示

Question

我一直在尝试使用 javascript 来实现这一点，但它似乎不起作用，我的 JSP 中有一个基于 JSTL 的 Select 元素。因为我想按“名称”属性过滤第二个选择中与第一个选择中的元素匹配的那些元素，所以如果我在第一个选择中选择“A”，我希望第二个选择的选项为 [A1,A2 ,A3...] 如果我在第一次选择中选择“B”，我希望第二次选择的选项是 [B1,B2,B3...] 等等。

这就是为什么我在第二个 Select 上为可能与第一个 Select 中的选项匹配的每个选项使用“A”或“B”作为名称属性。

我的 JSP 片段是这样的:

<tr>
<td align="right">address:</td>
<select id = "addressSelector" onchange = "filterBlocksByAddress()">
<option value="">
Choose an Address
</option>
<c:forEach items="${realStatesList}" var="realState">
<option>${realState.realStateID.address}</option>
</c:forEach>
</select>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td align="right">block:</td>
<select id ="blockSelector">
<option value="">Choose a Block</option>
<c:forEach items="${realStatesList}" var="realState">
<option class = "hidden" name = "${realState.realStateID.address}">
${realState.realStateID.block}
</option>
</c:forEach>
</select>
<td><input type="text" name="block"></td>
</tr>

我的 Javascript 方法是这样的:

function filterBlocksByAddress() {
    let flag = true;
    let addressText = document.getElementById('addressSelector').options[document.getElementById('addressSelector').selectedIndex].text;
    let blockOptions = document.getElementsByName(addressText);
    for (i = 0; i < blockOptions.length; i++) {
        blockOptions[i].classList.add("hidden");
    }
    for (i = 0; i < blockOptions.length; i++) {
        if(blockOptions[i].getAttribute("name") == addressText) {
            blockOptions[i].classList.remove("hidden");
        }
    }
    return flag;
}

隐藏类在 css 上定义为 .hidden{ display:none; }当 jsp 加载时，第二个选择隐藏了它的所有选项，但是当我开始在第一个选择中选择选项时，第二个选择开始显示匹配的选项(这就是我想要的)，但问题是它们永远不会当我在第一个选择中更改所选选项时，不再隐藏。有什么想法吗？非常感谢。

Answer 1

您可以使用 document.querySelectorAll('#blockSelector option[name]').. 将 hidden 类添加到所有选项，然后从选项中删除隐藏类其中 name="yourfirstselectvalue" 。

演示代码:

function filterBlocksByAddress(addressText) {
  console.log(addressText)
  //hide all options.
  document.querySelectorAll('#blockSelector option[name]').forEach(function(el) {
    el.classList.add("hidden")
  });
  //if not first one slected
  if (addressText != "Choose an Address") {
    //loop through options where values matches..
    document.querySelectorAll('#blockSelector option[name=' + addressText + ']').forEach(function(el) {
      el.classList.remove("hidden"); //remove class
    })
  }
  document.getElementById('blockSelector').selectedIndex = 0 //set first vlau slected

}

.hidden {
  display: none
}

<select id="addressSelector" onchange="filterBlocksByAddress(this.options[this.selectedIndex].text)">
  <option value="">Choose an Address</option>
  <option>A</option>
  <option>B</option>
</select>
<select id="blockSelector">
  <option value="">Choose a Block</option>
  <option class="hidden" name="A">
    A1
  </option>
  <option class="hidden" name="A">
    A2
  </option>
  <option class="hidden" name="B">
    B1
  </option>
  <option class="hidden" name="B">
    B2
  </option>

</select>