根据下拉框选择显示/隐藏 div答案

【问题标题】：show/hide div based on dropdown box selection根据下拉框选择显示/隐藏 div
【发布时间】：2021-05-09 11:42:55
【问题描述】：

我想根据下拉框选择显示/隐藏 div。并显示每个月的相关内容/文本，如附件示例所示。还需要在一个月后查看有关它的信息的选项将被自动删除，因此只会显示相关内容。

谁能帮我提供一个合适的代码？

【问题讨论】：

标签： javascript php html jquery wordpress

【解决方案1】：

首先获取当用户点击元素document.getElementById("element").onclick = function() 并在其中document.getElementById("element").style.display = "none"; none 用于隐藏 block 用于显示。

https://www.geeksforgeeks.org/hide-or-show-elements-in-html-using-display-property/

完整代码和示例见https://www.w3schools.com/howto/howto_js_tabs.asp

【讨论】：

【解决方案2】：

你可以这样做：

我会在底部有一个基本的解释。

#birdlist{
  visibility: hidden;
}

<!DOCTYPE html>
<html>
  
  <body>
  
    <select name="birds" id="birds">
      <option value="parrot" onclick="answer()">Parrot</option>
      <option value="crow" onclick="answer()">Crow</option>
      <option value="macaw" onclick="answer()">Macaw</option>
      <option value="pidgeon" onclick="answer()">pidgeon</option>
    </select>
    
    <div id = birdlist>
    
      <div id=parrotList>
        <p> this is a parrot</p>
      </div>

      <div id=crowList>
        <p> this is a crow </p>
      </div>

      <div id=macawList>
        <p> this is a macaw </p>
      </div>

      <div id=pidgeonList>
        <p> this is a pidgeon </p>
      </div>
      
    </div> 
   
  </body>
  
  <!--javascript section starts here-->
  <script>
  
    var e = document.getElementById("birds");
    
    function answer() {
    
      if (e.value == "parrot") {
        document.getElementById("parrotList").style.visibility = 'visible'; // parrot div
        document.getElementById("crowList").style.visibility = 'hidden';
        document.getElementById("macawList").style.visibility = 'hidden';
        document.getElementById("pidgeonList").style.visibility = 'hidden';
        

      } else if (e.value == "crow") {
        document.getElementById("parrotList").style.visibility = 'hidden';
        document.getElementById("crowList").style.visibility = 'visible'; // crow div
        document.getElementById("macawList").style.visibility = 'hidden';
        document.getElementById("pidgeonList").style.visibility = 'hidden';

      } else if (e.value == "macaw") {
        document.getElementById("parrotList").style.visibility = 'hidden';
        document.getElementById("crowList").style.visibility = 'hidden';
        document.getElementById("macawList").style.visibility = 'visible'; // macaw div
        document.getElementById("pidgeonList").style.visibility = 'hidden';

      } else {
        document.getElementById("parrotList").style.visibility = 'hidden';
        document.getElementById("crowList").style.visibility = 'hidden';
        document.getElementById("macawList").style.visibility = 'hidden';
        document.getElementById("pidgeonList").style.visibility = 'visible'; // pidgeon div
        
      }

    }
  
  </script>
  
  
</html>

首先，我们创建一个包含鸟类名称和 id 的下拉选择器，并为其设置鸟类的名称。

然后我们创建一个名为 birdlist 的 div 并将其隐藏在 css 中，以便将其中的所有 div 也隐藏起来，让我们的生活更轻松。

然后，我们为每只鸟创建 div，并使用

标签内有相应鸟名的 innerHTML，并相应地为它们设置一个 id。

然后我们创建一个javascript部分并将下拉值属性分配给变量e，我们可以在JS中使用它。然后我们创建一个函数，该函数将使用 if 语句检查用户选择的下拉值，并根据需要将必要的 div 设置为可见或不可见。

最后，我们将该函数指定为选择器的 html 部分中的 onclick。

希望这会有所帮助！

js fiddle 如果需要：https://jsfiddle.net/q0whp3mn/1/

【讨论】：

@YogevM。 jsfiddle.net/cb8j4xn1/28 这是完全相同代码的 jsfiddle。它像我测试过的那样有效。也许这会让您对可视化有更好的了解。