wordpress 中的 show/hide 部分具有 select 值

Question

我在 Wordpress 中使用 Divi 主题。我有一些我给了 ID 的部分。我有一个 select，对于每个选项值，我都使用部分 ID。我想通过更改 select 选项来显示一个部分并隐藏显示的另一部分。

这是 select :

<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

在您的代码中，您试图设置字符串值的样式 x.style

如果我们仔细观察 var x = document.getElementById("mySelect").value; 这将返回一个字符串值而不是 html 元素。但是是的，我们可以使用这个字符串值来获取 html 元素并使其可见并隐藏其他元素。

  function myFunction() {
    var selectElement = document.getElementById("mySelect"); 
    var selectedValue = selectElement.value;
    var selectedElement = document.getElementById(selectedValue);
          
    if (selectedElement.style.display === "none") {
       var elements = document.getElementsByClassName('section');
       for(var i = 0; i < elements.length; i++){
       elements[i].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" class='section' style='display:none'><h1>2020</h1></div>
    <div id="section2019" class='section' style='display:none'><h1>2019</h1></div>
    <div id="section2018" class='section' style='display:none'><h1>2018</h1></div>
    <div id="section2017" class='section' style='display:none'><h1>2017</h1></div>
    <div id="section2016" class='section' style='display:none'><h1>2016</h1></div>
    <div id="section2015" class='section' style='display:none'><h1>2015</h1></div>

Answer 2

非常感谢@Dupinder Singh。玩过代码后，我让它在我的 DIVI 主题上工作。

但是，由于您不能在 DIVI 中的部分上放置内联 CSS 样式，因此我执行了以下操作。我在每个部分和高级选项卡下 -> 自定义 CSS -> 主要内容 = 显示：none;

然后因为每个部分都是这样，所以我将 javascript 更改为以下内容：

<script>
function myFunction() {
        var selectElement = document.getElementById("serviceoptions"); 
        var selectedValue = selectElement.value;
        var selectedElement = document.getElementById(selectedValue);
              
        if (selectedElement.style.display === "") {
           var elements = document.getElementsByClassName('section');
           for(var i = 0; i < elements.length; i++){
              elements[i].style.display = "";
           }
           selectedElement.style.display = "block";
        } 
        else {
                selectedElement.style.display = "none";
             }
    }
    </script>

以下是我的 HTML 选择菜单：

<p style="text-align: center;">
<Select id="serviceoptions" onchange="myFunction()">
<option value="">Choose a Service</option>
<option value="behavior">Behavior Resources</option>
<option value="case">Case Management Resources</option>
<option value="education">Education Resources</option>
<option value="speceducation">Specialized Education Resources</option>
<option value="afterschool">After School Programs</option>
<option value="kidhealth">Children's Health Resources</option>
<option value="kidoralhealth">Children's Oral Health Resources</option>
<option value="homevisit">Home Visiting Resources</option>
<option value="nutrition">Nutrition Resources</option>
<option value="parent">Parent Resources</option>
<option value="transpo">Transportation Resources</option>
<option value="kidcare">Child Care Resources</option>
</select>
</p>

您可以在此处查看实际效果：first1thousand.com/resources

wordpress 中的 show/hide 部分具有 select 值

show/hide section in wordpress with select values

javascript

select

show-hide