HTML select 标签

HTML select 语法

在 HTML 中，select 标签用于定义一个下拉列表。下拉列表通常呈现为一个带有文本框和下拉箭头的控件，当用户点击下拉箭头即可显示选项列表，并选择其中一个选项。

语法：

<select>
    <option>选项 1</option>
    <option>选项 2</option>
    ……
</select>

说明：

select 标签必须与 option 标签搭配一起使用。其中，select 标签定义下拉列表的开始和结束，而 option 标签用于定义列表项。

select 标签的属性有很多，常用的如下表所示。

select 标签的常用属性
属性	说明
name	设置下拉列表的名称，用于表单提交时标识
form	设置下拉列表所属的表单 ID
size	设置显示的可见项的数量，默认为 1
multiple	是否允许选择多项
disabled	下拉列表是否禁用
required	下拉列表是否必填

HTML select 摘要

属于	HTML 下拉列表
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML select 示例

接下来，我们通过一个简单的例子来讲解一下 HTML select 标签是如何使用的。

示例 1：select 标签创建下拉列表

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <select>
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="javascript">JavaScript</option>
            <option value="vue">Vue</option>
            <option value="react">React</option>
        </select>
    </form>
</body>
</html>

页面效果如下图所示。

HTML select标签示例

分析：

在 HTML 中，下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项。

当我们点击下拉列表后，全部选项就会显示出来，页面效果如下图所示。

展开后的下拉列表

示例 2：select 标签的 multiple 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <select name="colors" multiple>
            <option value="red">红</option>
            <option value="orange">橙</option>
            <option value="yellow">黄</option>
            <option value="green">绿</option>
            <option value="cyan">青</option>
            <option value="blue">蓝</option>
            <option value="purple">紫</option>
        </select>
    </form>
</body>
</html>

页面效果如下图所示。

HTML select标签的multiple属性

分析：

下拉列表默认只能选择一项，而我们可以通过 multiple 属性来设置下拉列表可以选择多项。如果想要选取多项，可以使用 “Ctrl +鼠标左键” 来选取。multiple 属性是 HTML5 新增的，下面 2 种写法是等价的，推荐简写形式。

<!--简写形式-->
<select name="colors" multiple>

<!--完整形式-->
<select name="colors" multiple="multiple">

示例 3：select 标签的 size 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <select name="colors" size="7">
            <option value="red">红</option>
            <option value="orange">橙</option>
            <option value="yellow">黄</option>
            <option value="green">绿</option>
            <option value="cyan">青</option>
            <option value="blue">蓝</option>
            <option value="purple">紫</option>
        </select>
    </form>
</body>
</html>

页面效果如下图所示。

HTML select标签的size属性

分析：

有些小伙伴将 size 取值为 1、2、3 时，会发现 Chrome 浏览器无效。这是因为 Chrome 浏览器最低是 4 个选项，因此我们只能选取 4 及以上数字。