在开始创建下拉列表之前,了解一下什么是下拉列表很重要。下拉列表是一个可切换的菜单,允许用户从多个选项中选择一个选项。此列表中的选项在代码中定义,并与一个函数相关联。当您点击或选择此选项时,该函数会触发并开始执行。

您在大多数情况下都会在注册表单上看到下拉列表,以从下拉菜单中选择状态或城市。下拉列表允许我们仅从项目列表中选择一个。以下是下拉列表的外观示例:

创建下拉列表的重要点

  • 使用<select>标签与<option>标签一起在HTML中创建简单的下拉列表。之后,JavaScript将帮助执行此列表的操作。
  • 除此之外,您还可以使用容器标签<div>来创建下拉列表。在其中添加下拉项和链接。我们将在本章中的示例中讨论每种方法。
  • 您可以使用任何元素,如<button><a><p>来打开下拉菜单。

请看下面的示例,了解如何使用不同的方法创建下拉列表。

示例

使用<select>标签创建简单的下拉列表

此示例演示如何在HTML和JavaScript中使用<select>标签创建简单的下拉列表。当选择选项时,相应的值将显示在文本字段中。

<!DOCTYPE html>
<html>
<head>
  <title>下拉菜单示例</title>
</head>
<body>
  <form>
    <b>使用下拉列表选择您喜欢的教程网站:</b>
    <select id="myList" onchange="favTutorial()">
      <option>--- 选择教程 ---</option>
      <option value="w3schools">w3schools</option>
      <option value="javatiku">Javatiku</option>
      <option value="tutorialsiku">tutorialsiku</option>
      <option value="geeksforgeeks">geeksforgeeks</option>
    </select>
    <p>您选择的教程网站是:
      <input type="text" id="favourite" size="20">
    </p>
  </form>
  
  <script>
    function favTutorial() {
      var mylist = document.getElementById("myList");
      document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;
    }
  </script>
</body>
</html>

使用按钮和<div>标签创建下拉列表

此示例使用按钮创建下拉列表。单击按钮时,显示项目列表。

<!DOCTYPE html>
<html>
<head>
  <title>下拉菜单示例</title>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .button {
      padding: 10px 30px;
      font-size: 15px;
    }

    #list-items {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 185px;
    }

    #list-items a {
      display: block;
      font-size: 18px;
      background-color: #ddd;
      color: black;
      text-decoration: none;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button class="button" onclick="showHideDropdown()">选择语言</button>
    <div id="list-items">
      <a href="#">中文</a>
      <a href="#">英文</a>
      <a href="#">西班牙文</a>
      <a href="#">法文</a>
      <a href="#">日文</a>
    </div>
  </div>
  
  <script>
    function showHideDropdown() {
      var listItems = document.getElementById("list-items");
      listItems.style.display = (listItems.style.display === "none") ? "block" : "none";
    }
  </script>
</body>
</html>

多个下拉列表示例

此示例演示如何创建一个带有多个下拉菜单的表单,这些下拉菜单被归类为各种技术科目。单击下拉按钮时,显示相应的下拉列表。

<!DOCTYPE html>
<html>
<head>
  <title>多个下拉菜单示例</title>
  <style>
    /* 下拉菜单的样式 */
    .dropbtn {
      background-color: green;
      color: white;
      padding: 14px;
      font-size: 16px;
      cursor: pointer;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 140px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    /* 单击时显示下拉菜单 */
    .show {
      display: block;
    }
  </style>
</head>
<body>
  <h2>教程列表使用下拉菜单</h2>
  <p>单击按钮以打开教程下拉菜单。</p>
  
  <div class="dropdown">
    <button onclick="showHideDropdown('myDropdown1')" class="dropbtn">编程</button>
    <div id="myDropdown1" class="dropdown-content">
      <a href="#">Java</a>
      <a href="#">Python</a>
      <a href="#">C++</a>
      <a href="#">C</a>
    </div>
  </div>

  <div class="dropdown">
    <button onclick="showHideDropdown('myDropdown2')" class="dropbtn">数据库</button>
    <div id="myDropdown2" class="dropdown-content">
      <a href="#">MySQL</a>
      <a href="#">MongoDB</a>
      <a href="#">Cassandra</a>
    </div>
  </div>

  <div class="dropdown">
    <button onclick="showHideDropdown('myDropdown3')" class="dropbtn">Web技术</button>
    <div id="myDropdown3" class="dropdown-content">
      <a href="#">PHP</a>
      <a href="#">CSS</a>
      <a href="#">JavaScript</a>
    </div>
  </div>

  <script>
    function showHideDropdown(dropdownId) {
      var dropdownContent = document.getElementById(dropdownId);
      dropdownContent.classList.toggle("show");
    }

    // 如果用户在外部单击,关闭下拉菜单
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    };
  </script>
</body>
</html>

这些示例涵盖了使用HTML、CSS和JavaScript创建下拉列表的不同方法。

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全