概要

HTML select (<select>) 元素是一种表单控件,可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。

用法

Content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
许可内容 0个或多个 <option> or <optgroup> 元素
标记省略 无,无论开始标记和结束标记都是强制的
许可的父元素 接受段落式内容的任意元素

属性

包括下列全局属性

autofocus HTML5
这个属性能够让一个对象在页面加载的时候获得焦点. 在一个页面上下文中, 只有一个对象可以有这个属性,并且是布尔值(true 或者 false).
disabled
这个布尔值的属性表明一个用户是否可以操控该表单对象. 如果这个属性没有被明确定义, 则从它的父元素继承, 例如 fieldset; 如果没有父元素设置 disabled 属性, 那么默认该表单对象 enabled.
form HTML5
select所关联的form表单 (它的"表单拥有者"). 如果这个属性被明确定义, 那么它的值一定是在同一个document中表单ID. 这样能够让你把select标签放在任何的位置, 不仅限于作为form表单的后代元素.
multiple
这个布尔值的属性标记select是否可以多选. 默认是单选.
name
控件名称
required HTML5
规定select的值不能为空(布尔值).
size
如果控件显示为滚动列表框,则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为0
Firefox 提示: 根据HTML5规范, 默认值应该为1; 但是,在实践中,这样会影响到一些网站,同时其它浏览器也没有那么处理,所以Mozilla 在Firefox中选择继续使用默认值 0 .

DOM 接口

本元素由 HTMLSelectElement 接口实现。

示例

<!-- The second value will be selected initially -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

结果

注意

这个对象的内容是静态并且不可编辑. 但是你可以通过包含radioboxesradioboxes的一个<fieldset>来模拟可编辑特效(纯CSS), 请看例子.

Specifications

Specification Status Comments
HTML5
<select>
Recommendation  
HTML 4.01 Specification
<select>
Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
required attribute (Yes) 4.0 (2.0) 10 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) [1] 1.0 (1.0) [2] (Yes) (Yes) (Yes)
required attribute (Yes) 4.0 (2.0) 未实现 (Yes) (Yes)

 

[1] In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.

[2] Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.

 

参考

文档标签和贡献者

此页面的贡献者: wbamberg, pavilion2t, DUHZ, brandonzhu, ReyCG, ziyunfei
最后编辑者: wbamberg,