JavaScript 如何在选择选项时显示一个隐藏的div

显示和隐藏元素是JavaScript中的一项常见任务。它可以用来创建动态的用户界面，其中的内容会根据用户的输入或与页面的互动而改变。做到这一点的一个方法是，当选择一个选项时，显示一个隐藏的div。本文将指导你如何使用JavaScript来实现这一点。

一个布尔属性就是被选择的那个。它表示当页面加载时，如果有一个选择存在，就应该被预选。在下拉列表中，预选的选项将被首先显示。

要在选择选项时显示一个隐藏的div，你可以将 “style.display “的值设置为block。

示例

在下面的例子中，我们使用visibility属性来显示和隐藏这个div。

<!DOCTYPE html>
<html>
   <style>
      #tutorial {
         visibility: hidden;
         background-color: #76D7C4 ;
         color: black;
         width: 100px;
         height: 100px;
      }
   </style>
<body>
   <label for="select">Select:</label>
   <select name="select" id="select">
      <option value="hide">Hide</option>
      <option value="show">display</option>
   </select>
   <div id="tutorial">Tutorialspoint</div>
   <script>
      const el = document.getElementById('select');
      const box = document.getElementById('tutorial');
      el.addEventListener('change', function handleChange(event) {
         if (event.target.value === 'show') {
            box.style.visibility = 'visible';
         } else {
            box.style.visibility = 'hidden';
         }
      });
   </script>
</body>
</html>

当该脚本被执行时，它将在网页上生成一个由下拉列表组成的输出。当用户选择显示选项时，div的内容将被显示在浏览器上。另一个选项是隐藏，它的作用与显示选项相反。

示例

考虑到下面的例子，我们正在运行脚本来显示隐藏的div。

<!DOCTYPE html>
<html>
   <style>
      #hidden_div {
         display: none;
      }
   </style>
<body>
   <label for="select">Choose:</label>
   <select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
      <option value="0">DisAgree</option>
      <option value="1">Agree</option>
   </select>
   <div id="hidden_div">Welcome</div>
   <script>
      function showDiv(divId, element) {
         document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
      }
   </script>
</body>
</html>

在运行上述脚本时，网络浏览器显示下拉列表。如果用户选择了 “同意”，就会显示 “欢迎 “这个文本，这是一个隐藏的div。而另一个选项 “不同意 “则不显示。

示例

让我们看看另一个例子，在这个例子中，隐藏的div被显示为一个基于下拉列表的文本框。

<!DOCTYPE html>
<html>
<body>
   <script>
      function Div() {
         var Passport1 = document.getElementById("passport");
         var dvPassport = document.getElementById("tutorial");
         tutorial.style.display = Passport.value == "Yes" ? "block" : "none";
      }
   </script>
   <span>Do you have Passport?</span>
   <select id = "Passport" onchange = "Div()">
      <option value="No">No</option>
      <option value="Yes">Yes</option>
   </select>
   <div id="tutorial" style="display: none">
      Passport Number:
      <input type="text" id="txtPassportNumber" />
   </div>
</body>
</html>