HTML <select> 标签

在html中，select标签是使用来定义下拉列表的，通常在网页中用来实现下拉菜单。select标签定义的下拉列表中的各个选项由option标签来定义，也可以使用optgroup标签对option标签进行分组。

实例

创建带有 4 个选项的选择列表：

<!DOCTYPE html>
<html>
<body>
<h1>select 元素</h1>
<p>select元素用于创建下拉列表.</p>
<form action="/example/html/action_page.aspx">
  <label for="cars">选择一辆汽车:</label>
  <select name="cars" id="cars">
    <option value="沃尔沃">沃尔沃</option>
    <option value="赛博">赛博</option>
    <option value="欧宝">欧宝</option>
    <option value="奥迪">奥迪</option>
  </select>
  <br><br>
  <input type="submit" value="提交">
</form>
<p>单击“提交”按钮，表单数据将被发送到 名为“action_page.aspx”的服务.</p>
</body>
</html>

运行一下

上述例子展示了 <select> 的典型用法。元素中设置了 id 属性以将其与 <label> 元素关联在一起，提高可及性（accessibility）。name 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 <select> 中的一个 <option> 元素定义。

每个 <option> 元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。你可以在 <option> 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。

<select> 元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。

定义和用法

select 元素可创建单选或多选菜单。

<select> 元素中的 <option> 标签用于定义列表中的可用选项。

提示：在桌面电脑中，有几种方式在设置了 multiple 属性的 <select> 元素中选中多个选项：鼠标用户可以按住 Ctrl, Command, 或 Shift 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。

浏览器支持

元素
<select>	Yes	Yes	Yes	Yes	Yes

所有主流浏览器都支持 <select> 标签。

HTML 4.01 与 HTML 5 之间的差异

HTML5 添加了一些新属性。

提示和注释：

提示：select 元素是一种表单控件，可用于在表单中接受用户输入。

属性

HTML5 中的新属性。

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

全局属性

<select> 标签支持 HTML 中的全局属性。

事件属性

<select> 标签支持 HTML 中的事件属性。

更多实例

在 select 标签中运用 optgroup 元素

<html>
<body>
<label for="cars">请选择车辆:</label>
<select multiple size="4">
  <optgroup label="瑞典汽车">
    <option value="volvo">沃尔沃</option>
    <option value="saab">萨博</option>
    <option value="scania">斯堪尼亚</option>
  </optgroup>
  <optgroup label="德国汽车">
    <option value="mercedes">梅赛德斯</option>
    <option value="bmw">宝马</option>
    <option value="audi" disabled>奥迪</option>
  </optgroup>
</select>
</body>
</html>

运行一下

可选中多个选项，因为我们使用了 multiple 属性。
size 属性导致一次只有 4 行能显示；你可以滚动查看所有选项。
我们在其中使用了 <optgroup> 元素来将选项分成不同组别。这单纯是视觉上的分组，一般来说，分组由加粗的组名和缩进的选项组成。
"奥迪"选项使用了disabled 属性，因此不能被选中。

select 标签的样式

众所周知，<select>元素很难用 CSS 进行高效的设计。你可以像其他元素一样改变某些方面，比如边框、显示的字体等，你还可以使用 appearance 属性来去除默认的系统外观。但是，这些属性的表现在不同浏览器之间并不一致，不能完全兼容适配，例如在一列中顺序排列不同类型的表单元素。

因此如果你想完全控制，你应该考虑使用强大的第三方CSS样式库，或者尝试使用非语义元素和 JavaScript 来制作自定义的下拉菜单。