<select>: HTML 选择元素

以上示例展示了典型的 <select> 用法。它被赋予了 id 属性以使其能够与 <label> 关联以实现可访问性目的，以及 name 属性以表示提交到服务器的关联数据点的名称。每个菜单选项都由嵌套在 <select> 内部的 <option> 元素定义。

每个 <option> 元素应具有 value 属性，其中包含在选择该选项时提交到服务器的数据值。如果未包含 value 属性，则该值默认为元素中包含的文本。您可以在 <option> 元素上包含 selected 属性，以使其在页面首次加载时默认被选中。

<select> 元素在 JavaScript 中由 HTMLSelectElement 对象表示，该对象具有 value 属性，其中包含所选 <option> 的值。

<select> 元素具有一些独特的属性，您可以使用它们来控制它，例如 multiple 用于指定是否可以选择多个选项，以及 size 用于指定应同时显示多少个选项。它还接受大多数通用表单输入属性，例如 required、disabled、autofocus 等。

您可以在 <optgroup> 元素中进一步嵌套 <option> 元素，以在下拉菜单中创建单独的选项组。您还可以包含 <hr> 元素以创建分隔符，这些分隔符将在选项之间添加视觉断点。

有关更多示例，请参阅 本机表单小部件：下拉内容。

此元素包含 全局属性。

autocomplete

一个字符串，提供对 用户代理 自动完成功能的提示。有关值的完整列表以及有关如何使用自动完成的详细信息，请参阅 HTML 自动完成属性。

autofocus

此布尔属性让您指定表单控件在页面加载时应该具有输入焦点。文档中只有一个表单元素可以具有 autofocus 属性。

disabled

此布尔属性指示用户无法与控件交互。如果未指定此属性，则控件将从包含元素继承其设置，例如 <fieldset>；如果包含元素中没有设置 disabled 属性，则控件将被启用。

form

将 <select> 与其关联的 <form> 元素（其表单所有者）关联。此属性的值必须是同一文档中 <form> 的 id。（如果未设置此属性，则 <select> 将与其祖先 <form> 元素关联，如果有的话。）

此属性让您将 <select> 元素关联到文档中任何位置的 <form>，而不仅仅是在 <form> 内部。它还可以覆盖祖先 <form> 元素。

multiple

此布尔属性指示可以在列表中选择多个选项。如果未指定它，则一次只能选择一个选项。当指定 multiple 时，大多数浏览器将显示一个滚动列表框，而不是单行下拉菜单。

name

此属性用于指定控件的名称。

required

一个布尔属性，指示必须选择具有非空字符串值的选项。

size

如果控件以滚动列表框形式呈现（例如，当指定 multiple 时），此属性表示列表中应一次显示的行数。浏览器不需要以滚动列表框形式呈现选择元素。默认值为 0。

注意：根据 HTML 规范，size 的默认值应为 1；但是，在实践中，人们发现这会导致某些网站崩溃，并且目前没有其他浏览器这样做，因此 Mozilla 决定暂时继续在 Firefox 中返回 0。

在台式电脑上，可以通过多种方式在具有multiple属性的<select>元素中选择多个选项。

鼠标用户可以按住Ctrl、Command或Shift键（取决于您的操作系统），然后单击多个选项来选择/取消选择它们。

键盘用户可以通过以下方式选择多个连续的项目：

• 将焦点放在<select>元素上（例如，使用Tab）。
• 使用Up和Down光标键上下移动选项，选择想要选择范围的顶部或底部的项目。
• 按住Shift键，然后使用Up和Down光标键增加或减少所选项目的范围。

键盘用户可以通过以下方式选择多个非连续的项目：

• 将焦点放在<select>元素上（例如，使用Tab）。
• 按住Ctrl键，然后使用Up和Down光标键更改“聚焦”的select选项，即如果您选择这样做，将被选择的选项。“聚焦”的select选项会以虚线突出显示，与键盘聚焦的链接相同。
• 按Space选择/取消选择“聚焦”的select选项。

<select>元素以 CSS 样式化是出了名的困难。您可以影响某些方面，就像任何元素一样——例如，操纵盒子模型、显示的字体等，并且可以使用appearance属性删除默认的系统appearance。

但是，这些属性在不同的浏览器中不会产生一致的结果，而且很难将不同类型的表单元素在同一列中对齐。<select>元素的内部结构很复杂，难以控制。如果您希望获得完全控制权，则应考虑使用具有良好样式化表单小部件功能的库，或者尝试使用非语义元素、JavaScript 和WAI-ARIA来滚动您自己的下拉菜单以提供语义。

有关<select>样式化的更多有用信息，请参阅：

• HTML 表单样式化
• HTML 表单的高级样式化
• field-sizing属性，它控制<select>元素相对于其包含的选项的大小。

<select>中的<hr>应该被认为纯粹是装饰性的，因为它们目前在可访问性树中不可见，因此也不向辅助技术公开。

以下示例创建一个非常简单的下拉菜单，其中第二个选项默认选中。

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

结果

以下示例使用<optgroup>和<hr>创建一个带有分组的下拉菜单，以便用户更容易理解下拉菜单中的内容。

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

结果

以下示例更复杂，展示了您可以在<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>

结果

您会看到：

• 由于我们包含了multiple属性，因此可以选择多个选项。
• size属性导致一次只显示 4 行；您可以滚动以查看所有选项。
• 我们包含了<optgroup>元素，将选项分成不同的组。这只是一个纯粹的视觉分组，其可视化通常包括组名以粗体显示，选项缩进。
• “Hamster”选项包含disabled属性，因此根本无法选择。

• <select>触发的事件：change、input
• <option>元素
• <optgroup>元素