文本正在翻译中!我们很缺人手,所以翻译进度有点慢,赶紧加入进来一起翻译吧!
概要
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> 元素 |
标记省略 | 无,无论开始标记和结束标记都是强制的noney |
许可的父元素 | 接受段落式内容的任意元素 |
属性
包括下列全局属性。
-
autofocus
HTML5 - 这个属性能够让一个对象在页面加载的时候获得焦点. 在一个页面上下文中, 只有一个对象可以有这个属性,并且是布尔值(true 或者 false).
-
disabled
-
这个布尔值的属性表明一个用户是否可以操控该表单对象. 如果这个属性没有被明确定义, 则从它的父元素继承, 例如
fieldset
; 如果没有父元素设置disabled
属性, 那么默认该表单对象 enabled. -
form
HTML5 - select所关联的form表单 (它的"表单拥有者"). 如果这个属性被明确定义, 那么它的值一定是在同一个document中表单ID. 这样能够让你把select标签放在任何的位置, 不仅限于作为form表单的后代元素.
-
multiple
- 这个布尔值的属性标记select是否可以多选. 默认是单选.
-
name
- 控件名称
-
required
HTML5 - 规定select的值不能为空(布尔值).
-
size
- If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select elements as a scrolled list box. The default value is 0.
Firefox note: According to the HTML5 specification, the default value for size should be 1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla have opted to continue to return 0 for the time being with Firefox.
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>
结果
注意
这个对象的内容是静态并且不可编辑. 但是你可以通过包含radioboxes和radioboxes的一个<fieldset>
来模拟可编辑特效(纯CSS), 请看例子.
Specifications
Specification | Status | Comments |
---|---|---|
HTML5 <select> |
Recommendation | |
HTML 4.01 Specification <select> |
Recommendation |
浏览器兼容性
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) | Not supported | (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
.
参考
- 其它表单对象:
<form>
,<legend>
,<label>
,<button>
,<option>
,<datalist>
,<optgroup>
,<fieldset>
,<textarea>
,<keygen>
,<input>
,<output>
,<progress>
and<meter>
.