如何使用纯JS（无库）在选择下拉值时显示/隐藏DIV？

Question

我有来自多个地点的潮汐表，每个潮汐表都位于一个 div 内。位置是从下拉菜单中选择的。页面打开时默认显示第一个位置潮汐表。当我更改位置时，它会选择相应的 div 并仅显示该 div 内的潮汐表，而忽略其他 div。它工作正常（感谢@charlietfl），但是使用 Jquery 导致我主页的其他部分出现问题，所以我正在寻找不同的解决方案来实现相同的结果。

这就是我现在所拥有的：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script>

   $('select#location').change(function() {

   $('.box').hide().filter('.' + this.value).show();

   // set the value and trigger change on page load

   }).val('A').change()

 </script>

 <div>

   <select id="location">

      <option value="A">Location A</option>

      <option value="B">Location B</option>

      <option value="C">Location C</option>

   </select>

 </div>

 <div class="box A">Tide Location A</div>

 <div class="box B">Tide Location B</div>

 <div class="box C">Tide Location C</div>

有没有办法使用纯 JS（无库）获得相同的结果？提前致谢。

Answer 1

请尝试以下示例document.querySelector("select#location").addEventListener("change", () => {&nbsp; display(event.target.value);});const boxs = document.querySelectorAll("div.box");function display(value) {&nbsp; for (const box of boxs) {&nbsp; &nbsp; if (box.classList.contains(value)) {&nbsp; &nbsp; &nbsp; box.classList.remove("hide");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; box.classList.add("hide");&nbsp; &nbsp; }&nbsp; }}display("A");.hide {&nbsp; display: none;}<div>&nbsp; <select id="location">&nbsp; &nbsp; <option value="A">Location A</option>&nbsp; &nbsp; <option value="B">Location B</option>&nbsp; &nbsp; <option value="C">Location C</option>&nbsp; </select></div><div class="box A">Tide Location A</div><div class="box B">Tide Location B</div><div class="box C">Tide Location C</div>

Answer 2

对 div使用 CSS显示属性function myFunction() {&nbsp; var x = document.getElementById("myDIV");&nbsp; if (x.style.display === "none") {&nbsp; &nbsp; x.style.display = "block";&nbsp; } else {&nbsp; &nbsp; x.style.display = "none";&nbsp; }}