如何使用纯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", () => {

  display(event.target.value);

});

const boxs = document.querySelectorAll("div.box");

function display(value) {

  for (const box of boxs) {

    if (box.classList.contains(value)) {

      box.classList.remove("hide");

    } else {

      box.classList.add("hide");

    }

  }

}

display("A");

.hide {

  display: none;

}

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

Answer 2

对 div使用 CSS显示属性

function myFunction() {

  var x = document.getElementById("myDIV");

  if (x.style.display === "none") {

    x.style.display = "block";

  } else {

    x.style.display = "none";

  }

}