如何在 HTML 中创建下拉列表

17 Mar 2025 | 6 分钟阅读

在本文中，我们将了解如何在 HTML 中创建下拉列表。我们首先了解一下下拉菜单。

什么是下拉元素？

下拉菜单是一种控制元素，允许用户从列表中选择任何一个值。

HTML 中的下拉列表

HTML 中的下拉列表用于显示各种选项，用户可以从中选择一个或多个选项。通常，下拉列表用于表单中，用于选择课程、性别等。

我们可以借助 HTML 标签创建下拉列表。<select> 标签与<option> 标签结合使用。

仅用于选择单个选项的下拉列表语法

<select>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="4">Option4</option>
    <option value="5">Option5</option>
    <option value="6">Option6</option>
</select>

上述语法用于创建列表，用户只能从中选择一个选项。<select> 是开始标签，</select> 是结束标签。<option> 是开始标签，</option> 是结束标签。

用于选择多个选项的下拉列表语法

<select multiple>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="4">Option4</option>
    <option value="5">Option5</option>
    <option value="6">Option6</option>
</select>

上述语法用于创建列表，用户可以从中选择多个选项。<select> 是开始标签，</select> 是结束标签。<option> 是开始标签，</option> 是结束标签。一个名为 "multiple" 的布尔属性用于创建多选下拉列表。

HTML 中下拉列表的示例

让我们通过示例来理解下拉列表。

示例 1

在以下示例中，我们将构建一个下拉列表，用户可以从中选择单个选项。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown list in HTML</title>
</head>
<body>
    <h2>Illustration of dropdown list in HTML</h2>
    <div>
        <h3>Select your favourite icecream:</h3>
        <select name="icecream" id="ice-cream">
            <option value="icecream1">Milk Chocolate Icecream</option>
            <option value="icecream2">Mango Icecream</option>
            <option value="icecream3">Strawberry Icecream</option>
            <option value="icecream4">Dark Chocolate Icecream</option>
            <option value="icecream5">Oreo Icecream</option>
            <option value="icecream6">Kitkat Icecream</option>
        </select>
    </div>
</body>
</html>

输出

在下面给出的结果中，我们可以清楚地看到下拉列表，用户可以从中选择单个选项。

示例 2

在以下示例中，我们将创建一个下拉列表，用户可以从中选择多个选项。我们将使用 JavaScript 函数来选择多个选项。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown list in HTML from which a user can opt for multiple options</title>
</head>
<body>
    <h2>Demo of the multi-select dropdown list in HTML</h2>
    <div>
        <h3>Select the books you have read:</h3>
        <select name="books" id="books" multiple>
            <option value="book1">Mahabharata</option>
            <option value="book2">Bhagavad Gita</option>
            <option value="book3">The Diary of a Young Girl</option>
            <option value="book4">War and Peace</option>
            <option value="book5">Train your Brain</option>
            <option value="book6">Rich Dad Poor Dad</option>
            <option value="book7">The Hunger Games</option>
            <option value="book8">Sapiens</option>
            <option value="book9">Cosmos</option>
            <option value="book10">The Power of Habit</option>
        </select>
        <input type="button" onclick="multipleFunc()" value="Select multiple options">
    </div>
<script>
    function multipleFunc() {
        document.getElementById("books").multiple = true;
    }
</script>
</body>
</html>

输出

在下面给出的结果中，我们可以看到一个多选下拉列表，因此用户可以选择多个选项。

示例 3

在此演示中，我们将构建一个下拉列表并应用 CSS 来装饰下拉列表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating dropdown list utilizing CSS</title>
    <style>
        h3 {
            color: blueviolet;
        }
        select {
            border: 2px dashed blueviolet;
            background-color: rgb(236, 219, 252);
            padding: 2px;
            width: 300px;
            box-shadow: 2px 5px 6px blueviolet;
        }
    </style>
</head>
<body>
    <h2>Demo of the dropdown list and decorating it utilizing CSS</h2>
    <div>
        <h3>Select a movie that you want to watch:</h3>
        <select name="movie" id="movie">
            <option value="movie1">12th Fail</option>
            <option value="movie2">Teri Baaton Mein Aisa Uljha Jiya</option>
            <option value="movie3">Fighter</option>
            <option value="movie4">Merry Christmas</option>
            <option value="movie5">Kho Gaye Hum Kahan</option>
            <option value="movie6">Mast Mein Rehne Ka</option>
            <option value="movie7">The Archies</option>
            <option value="movie8">Animal</option>
            <option value="movie9">Farrey</option>
            <option value="movie10">Dunki</option>
        </select>
    </div>
</body>
</html>

输出

在下面给出的结果中，我们可以看到一个装饰过的下拉列表，用户可以从中选择一个选项。

示例 4

在此演示中，我们将在注册表单中创建一个下拉列表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Constructing a dropdown list in the registration form</title>
    <style>
        h3 {
            color: maroon;
            font-size: 24px;
            text-align: center;
        }
        form {
            border: 2px solid maroon;
            padding: 15px;
            text-align: center;
        }
        input, select {
            border: 2px solid maroon;
            padding: 5px;
            width: 200px;
            font-size: 15px;
            margin-left: 20px;
        }
        label {
            font-weight: bold;
            color: maroon;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Demo of a dropdown list in the Registration Form</h1>
    <div>
        <h3>Registration Form</h3>
        <form>
            <label for="first-name">First name:</label>
            <input type="text" value="Type your first name"> <br> <br>
            <label for="second-name">Second name:</label>
            <input type="text" value="Type your second name"> <br> <br>
            <label for="email">Email:</label>
            <input type="email" value="Type your email"> <br> <br>
            <label for="dob">Date of Birth:</label>
            <input type="date"> <br> <br>
            <label for="course">Select your course:</label>
            <select name="course" id="course">
                <option value="btech">B. Tech</option>
                <option value="bca">BCA</option>
                <option value="bba">BBA</option>
                <option value="mtech">M. Tech</option>
                <option value="mca">MCA</option>
                <option value="bca">BCA</option>
            </select>
        </form>
    </div>
</body>
</html>

输出

在下面给出的结果中，我们可以在注册表单中看到一个名为“选择您的课程：”的下拉列表。

示例 5

在此示例中，我们将在侧边栏中创建一个下拉列表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: 'Times New Roman', Times, serif;
        }

        .sidebar {
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            position: fixed;
            background-color: peru;
            padding-top: 18px;
            overflow-x: hidden;
            z-index: 1;
        }

        .sidebar a, .dropdown-button {
            margin-left: 10px;
            padding: 10px;
            font-size: 24px;
            width: 100%;
            color: brown;
            display: block;
            text-decoration: none;
            border: none;
            cursor: pointer;
            background: none;
            text-align: left;
            outline: none;
        }

        .sidebar a:hover, .dropdown-button:hover {
            color: white;
        }

        .dropdown {
            margin-left: 300px;
            font-size: 24px;
        }

        .dropdown-box {
            padding-left: 6px;
            display: none;
            background-color: peru;
        }

        .fa-caret-down {
            float: right;
            padding-right: 6px;
        }

        @media screen and (max-height: 500px) {
        .sidebar {padding-top: 18px;}
        .sidebar a {font-size: 20px;}
        }
</style>
</head>
<body>

<div class="sidebar">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-button"> More 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-box">
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
    <a href="#">Page 3</a>
  </div>
</div>

<div class="dropdown">
  <h2>Main Content. . .</h2>
</div>

<script>
var dropdown = document.getElementsByClassName("dropdown-button");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>

</body>
</html>

输出

我们可以清楚地看到侧边栏上的下拉列表，点击后会打开。

示例 6

在此演示中，我们将在导航栏中构建一个下拉列表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {
        font-family:'Courier New', Courier, monospace;
    }

    .navbar {
        background-color: darkgoldenrod;
        overflow: hidden;
    }

    .navbar a {
        padding: 16px 18px;
        float: left;
        color: snow;
        font-size: 15px;
        text-decoration: none;
        text-align: center;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropdown-button {
        border: none;
        outline: none;
        color: white;
        font-size: 15px;
        padding: 16px 18px;
        background-color: darkgoldenrod;
        font-family: 'Courier New', Courier, monospace;
        margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbutton {
        background-color: brown;
    }

    .dropdown-box {
        display: none;
        position: absolute;
        background-color: darkgoldenrod;
        min-width: 160px;
        box-shadow: 10px rgba(64, 61, 61, 0.2);
        z-index: 1;
    }

    .dropdown-box a {
        float: none;
        text-decoration: none;
        text-align: left;
        color: snow;
        padding: 12px 16px;
        display: block;
    }

    .dropdown-box a:hover {
        background-color: brown;
    }

    .dropdown:hover .dropdown-box {
        display: block;
    }
</style>
</head>
<body style="background-color:white;">

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropdown-button"> More 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-box">
      <a href="#">Page 1</a>
      <a href="#">Page 2</a>
      <a href="#">Page 3</a>
    </div>
  </div> 
</div> <br> <br> <br> <br> <br> <br> <br>

<h3>Dropdown List in the Navigation Bar</h3>
<p>Click on the "More" BUTTON to see the dropdown options in the list.</p>
</body>
</html>

输出

这是输出，我们可以在其中看到导航栏中的下拉列表，点击后会打开。

浏览器支持

以下是支持<select> 标签和<option> 标签的浏览器：

Microsoft Edge
Safari
谷歌浏览器
Opera
火狐

结论

我们已经了解了如何在 HTML 中创建下拉列表。下拉列表用于从列表中选择一个或多个选项。我们可以创建两种类型的下拉列表：第一种是创建只能选择单个选项的下拉列表，另一种是创建可以选择多个值的下拉列表。我们通过示例了解了如何在本文中创建这两种类型的下拉列表。

下一主题如何在 HTML 中创建框架

如何在 HTML 中创建下拉列表

什么是下拉元素？

HTML 中的下拉列表

仅用于选择单个选项的下拉列表语法

用于选择多个选项的下拉列表语法

HTML 中下拉列表的示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中创建下拉列表

什么是下拉元素？

HTML 中的下拉列表

仅用于选择单个选项的下拉列表语法

用于选择多个选项的下拉列表语法

HTML 中下拉列表的示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

浏览器支持

结论

相关帖子

Textarea disabled

HTML 验证器

Jio Dongle 本地 HTML

HTML 解释器

ThemeForest HTML

如何运行 HTML 程序

Excel 中级测试

带有分页、搜索和排序的 HTML 表格

HTML 按钮类型

HTML 超链接标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器