在带有选择值的wordpress中显示/隐藏部分

Question

我在Wordpress中使用Divi Theme。我有提供ID的部分。我有一个选择，对于每个选项值，我使用部分ID。我想通过更改选择选项来显示一个部分，并隐藏显示的另一部分。

这里是选择项：

<select name="years" id="mySelect" onchange="myFunction()">
      <option value="">TOUTES LES ANNÉES </option>
      <option value="section2020">2020</option>
      <option value="section2019">2019</option>
      <option value="section2018">2018</option>
      <option value="section2017">2017</option>
      <option value="section2016">2016</option>
      <option value="section2015">2015</option>
</select>

这里是javascript：

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  if (x.style === "display:none;") {
    x.style = "display:block";
  } else {
    x.style = "display:none;";
  }
}
</script>

您能告诉我为什么它不起作用吗？

谢谢卡罗琳

Answer 1

您正在这里获取元素值var x = document.getElementById("mySelect").value;，而不是元素

Try this code

    function myFunction() {
      var selectElement = document.getElementById("mySelect"); 
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
      
      if (selectedElement.style.display === "none") {
        selectedElement.style.display = "block";
      } else {
        selectedElement.style.display = "none";
      }
    }

   


    <select name="years" id="mySelect" onchange="myFunction()">
          <option value="">TOUTES LES ANNÉES </option>
          <option value="section2020">2020</option>
          <option value="section2019">2019</option>
          <option value="section2018">2018</option>
          <option value="section2017">2017</option>
          <option value="section2016">2016</option>
          <option value="section2015">2015</option>
    </select>


<div id="section2020" style='display:none'><h1>2020</h1></div>
<div id="section2019" style='display:none'><h1>2019</h1></div>
<div id="section2018" style='display:none'><h1>2018</h1></div>
<div id="section2017" style='display:none'><h1>2017</h1></div>
<div id="section2016" style='display:none'><h1>2016</h1></div>
<div id="section2015" style='display:none'><h1>2015</h1></div>