Question

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

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

Answer 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

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

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

2 个答案: