HTML 下拉列表（select）是一种常见的表单元素，用于提供多个选项供用户来选择其中一项。下拉列表通常呈现为一个带有文本框和下拉箭头的控件，当用户点击下拉箭头即可显示选项列表，并选择其中一个选项，如下图所示。
HTML 下拉列表简介
在 HTML 中，下拉列表（下拉菜单）由 select 和 option 这 2 个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由 ul 和 li 这 2 个标签配合使用来表示。
语法：
<select>
<option value="值1">选项A </option>
<option value="值2">选项B</option>
……
<option value="值n">选项N</option>
</select>说明：
为了更好地理解，我们可以把下拉列表看成是一种 “特殊的无序列表”。
- ul 变成了 select（外层容器）。
- li 变成了 option（列表项）。
示例 1：HTML 创建下拉列表
<!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 中，下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项。
当我们点击下拉列表后，全部选项就会显示出来，页面效果如下图所示。
需要注意的是，很多初学的小伙伴容易偷懒，不给每一个 option 添加 value 属性。虽然浏览器也能运行，但这不是标准写法。为每一个 option 添加一个 value 属性，主要目的是方便后端处理数据。
<!--推荐-->
<option value="html">HTML</option>
<!--不推荐-->
<option value="html">HTML</option>HTML select 标签属性
在 HTML 中，select 标签常用属性有很多，如下表所示。
| 属性 | 说明 |
|---|---|
| name | 下拉列表的名称，用于表单提交时标识数据 |
| size | 设置显示的可见项的数量，默认为 1 |
| multiple | 是否允许选择多项，默认为 false |
| disabled | 下拉列表是否禁用，默认为 false |
| required | 下拉列表是否必填，默认为 false |
示例 2：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>页面效果如下图所示。
分析：
有些小伙伴将 size 取值为 1、2、3 时，会发现 Chrome 浏览器无效。这是因为 Chrome 浏览器最低是 4 个选项，因此我们只能选取 4 及以上数字。
示例 3：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>页面效果如下图所示。
分析：
下拉列表默认只能选择一项，而我们可以通过 multiple 属性来设置下拉列表可以选择多项。如果想要选取多项，可以使用 “Ctrl + 鼠标左键” 来选取。multiple 属性是 HTML5 新增的，下面 2 种写法是等价的，推荐简写形式。
<!--简写形式-->
<select name="colors" multiple>
<!--完整形式-->
<select name="colors" multiple="true">HTML option 标签属性
在 HTML 中，option 标签的属性有很多，常用的如下表所示。
| 属性 | 说明 |
|---|---|
| value | 选项的值 |
| label | 选项的显示文本，默认为 value 属性的值 |
| selected | 是否选中，默认为 false |
| disabled | 是否禁用 |
示例 4：option 标签的 selected 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<select size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript" selected>JavaScript</option>
<option value="vue">Vue</option>
<option value="react">React</option>
</select>
</form>
</body>
</html>页面效果如下图所示。
分析：
selected 属性也是 HTML5 新增的，下面 2 种写法是等价的。
<!--简写形式-->
<option value="javascript" selected>JavaScript</option>
<!--完整形式-->
<option value="javascript" selected="true">JavaScript</option>对于上面例子来说，如果我们把 size="5" 去掉，此时页面效果如下图所示。
HTML optgroup 标签
当选项非常多时（比如有几百个城市、或几十种编程语言），如果全堆在一起，用户体验会变得非常差。此时，我们可以使用 optgroup 标签给选项进行 “分组”。
示例 5：使用 optgroup 标签进行分组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<h3>请选择语言：</h3>
<select name="language">
<optgroup label="前端技术">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="后端技术">
<option value="python">Python</option>
<option value="go">Go</option>
<option value="java">Java</option>
</optgroup>
</select>
</form>
</body>
</html>页面效果如下图所示。
分析：
当我们点击展开下拉菜单时，页面效果如下图所示。
