Skip to main content

下拉控件元素 select

Docs

下拉控件​

下拉菜单是一种简单地让用户从许多不同选项中进行选择的控件，不占用用户界面太多空间。HTML 有两种下拉内容：一种是选择框、另外一种是自动补全框。这两种情况下的交互是相同的——一旦被激活，浏览器就会显示可供用户选择的值的列表。

备注

你可以在 GitHub 的 drop-down-content.html 上找到所有下拉框类型的例子（也可以看看在线演示）。

  • option 是 select 的子元素，一个 option 代表一个选项
  • select 常用属性
    • multiple：可以多选
    • size：显示多少项
  • option 常用属性
    • selected：默认被选中

选择框​

一个简单的选择框是由 <select> 元素及一个或多个 <option> 子元素构成的，每个子元素指定了选择框的可能取值。

基础示例​

Loading Github Gist ...
Details

如果需要的话，选择框的默认值可以由要指定默认值的 <option> 元素中的 selected 属性设置，这样在页面加载后，该选项可以预先选中。

使用 optgroup​

<option> 元素可以嵌套在 <optgroup> 元素中，以在视觉上关联一组取值：

Loading Github Gist ...
Details

在 <optgroup> 元素中，label 属性的值在嵌套选项之前显示。浏览器往往在视觉上将它们与选项分开（如，将其粗体并显示于不同的嵌套级别），以避免它们与实际选项混淆。

使用 value 属性​

如果一个 <option> 元素明确设置了 value 属性，当表单提交时也会提交那个选项对应的值。如果像上面的例子那样省略了 value 属性，<option> 元素的内容会作为提交的值。所以 value 属性并不是必需的，然而你可能需要向服务器中发送与视觉所见相比缩短或者改变过的值。

多选选择框​

默认情况下，选择框只允许用户选择单个值。通过向 <select> 元素添加 multiple 属性，你可以允许用户使用操作系统提供的机制选择多个值（如按下 Cmd/Ctrl 并先后单击多个值）。

Loading Github Gist ...
Details
备注

  • 在多选选择框的情况下，你会注意到选择框不再以下拉内容的形式显示数值——相反，所有的值都会一次性显示在一个列表中，可选的 size 属性决定了控件的高度。

  • 任何支持 <select> 元素的浏览器也支持 multiple 属性。

自动补全框​

你可以通过 <datalist> 元素中的一些显示的 <option> 子元素为表单项提供推荐的自动补全值。<datalist> 元素需要指定一个 id。

数据列表会使用 list 属性绑定至一个 <input> 元素（如 text 或 email 输入类型），该属性的取值就是要绑定的数据列表的 id 值。

一旦数据列表与表单控件相关联，它的选项就会被用来自动补全用户输入的文本；通常，它以下拉框的形式呈现给用户，列出他们输入内容的可能匹配。

基础示例​

Loading Github Gist ...
Details

Datalist 支持和回退​

几乎所有浏览器支持 datalist，但是如果你仍然需要给诸如 IE 10 及以前的旧版浏览器提供支持。

支持 <datalist> 元素的浏览器会忽略任何非 <option> 元素，而 datalist 仍然会按期工作。不支持 <datalist> 元素的旧浏览器会显示标签和选择框。