{{HTMLRef}}
HTML <select> 元素表示一个提供选项菜单的控件：
<select>
{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}
上述例子展示了 <select> 的典型用法。元素中设置了 id 属性以将其与 {{htmlelement("label")}} 元素关联在一起，提高可及性（accessibility）。name 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 <select> 中的一个 {{htmlelement("option")}} 元素定义。
id
name
每个 <option> 元素都应该有一个 {{htmlattrxref("value", "option")}} 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。你可以在 <option> 元素中设置一个 {{htmlattrxref("selected")}} 属性以将其设置为页面加载完成时默认选中的元素。
<option>
value
<select> 元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。
multiple
size
required
disabled
autofocus
你还可以将 <option> 元素放在 {{htmlelement("optgroup")}} 元素中以为下拉菜单创建不同的选项分组。
在 原生表单部件 中查看更多示例。
包括下列全局属性。
fieldset
<form>
在桌面电脑中，有几种方式在设置了 multiple 属性的 <select> 元素中选中多个选项：
鼠标用户可以按住 Ctrl, Command, 或 Shift 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。
警告：以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。
另请注意：在 macOS 中， Ctrl + Up 和 Ctrl + Down 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。
键盘用户可以这样选中多个连续的选项：
键盘用户还可以这样选中多个不连续的选项：
众所周知，<select>元素很难用 CSS 进行高效的设计。你可以像其他元素一样改变某些方面——例如，调整 盒模型、显示的字体 等，你还可以使用 {{cssxref("appearance")}} 属性来去除默认的系统外观。
但是，这些属性的表现在不同浏览器之间并不一致，而且有些事情难以很好地处理，例如在一列中顺序排列不同类型的表单元素。 <select>元素的内部结构复杂，难以控制。 如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 WAI-ARIA 来提供语义。
有关样式<select>的更多有用信息，请参阅：
<!-- 第二项会默认选中 --> <select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>
{{EmbedLiveSample("Basic_select", "", "100")}}
下面的例子更加复杂，展示了可用在 <select> 元素上的更多功能：
<label>Please choose one or more pets: <select name="pets" multiple size="4"> <optgroup label="4-legged pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster" disabled>Hamster</option> </optgroup> <optgroup label="Flying pets"> <option value="parrot">Parrot</option> <option value="macaw">Macaw</option> <option value="albatross">Albatross</option> </optgroup> </select> </label>
{{EmbedLiveSample("Advanced_select_with_multiple_features", "", "100")}}
你会看见：
role
{{Specifications}}