当另一个 select 中的另一个选项被 select 编辑时 Hide/Show <option> 在 select 元素中

Question

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

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

我的 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;
}

隐藏 class 在 css 上定义为 .hidden{ display:none; } 当 jsp 加载第二个 select 时，它的所有选项都隐藏了，但是一旦我开始 select 第一个 select 中的选项，然后第二个 select 开始显示匹配的（这就是我想要的），但问题是当我更改第一个 select 中的 selected 选项时，它们再也不会被隐藏。有什么想法吗？，非常感谢。

Answer 1

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

演示代码 :

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>

当另一个 select 中的另一个选项被 select 编辑时 Hide/Show <option> 在 select 元素中

Hide/Show <option> in select element when another option in another select is selected

javascript

jsp

select

display

option