<select>：HTML Select 元素

试一试

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

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

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

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

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

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

有关更多示例，请参见原生表单小部件：下拉内容。

属性

此元素包含全局属性。

autocomplete

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

autofocus

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

disabled

此布尔属性表示用户无法与控件交互。如果未指定此属性，则控件从其包含元素（例如 <fieldset>）继承其设置；如果没有设置 disabled 属性的包含元素，则控件处于启用状态。

form

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

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

multiple

此布尔属性指示可以在列表中选择多个选项。如果未指定，则一次只能选择一个选项。指定 multiple 时，大多数浏览器将显示一个可滚动列表框，而不是单行下拉列表。多个选定的选项使用 URLSearchParams 数组约定提交，即 name=value1&name=value2。

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 光标键更改“聚焦”选择选项，即如果您选择这样做，将被选中的选项。“聚焦”选择选项以虚线轮廓突出显示，与键盘聚焦链接的方式相同。
• 按 Space 选择/取消选择“聚焦”选择选项。

使用 CSS 样式

<select> 元素在历史上一直难以通过 CSS 进行有效样式设置，因此引入了功能以创建完全可定制的选择元素。

传统选择样式

在不支持现代自定义功能（或无法使用它们的旧代码库）的浏览器中，您只能操作盒模型、显示的字体等。您还可以使用 appearance 属性来删除默认的系统 appearance。

然而，使用传统的 <select> 元素很难在不同浏览器中获得一致的结果。如果您想获得完全控制，您应该考虑使用一个具有良好表单小部件样式功能的库，或者尝试使用非语义元素、JavaScript 和 WAI-ARIA 来创建自己的下拉菜单，以提供语义。

您可以使用 :open 伪类来样式化处于打开状态的 <select> 元素，即当下拉选项列表显示时。这不适用于多行 <select> 元素（那些设置了 multiple 属性的元素）——它们倾向于呈现为滚动列表框而不是下拉列表，因此没有打开状态。

有关传统 <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> 元素
• 可定制的 select 元素