aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/htmloptionelement/index.html
blob: 4272e516eb5ceca9ce7c952f7c4f3b4640bb4d0f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
---
title: HTMLOptionElement
slug: Web/API/HTMLOptionElement
tags:
  - API
  - HTML DOM
  - HTMLOptionElement
  - Option
  - 参考
  - 接口
  - 选项
translation_of: Web/API/HTMLOptionElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLOptionElement</code></strong> 接口表示了 {{HTMLElement("option")}} 元素并继承{{domxref("HTMLElement")}}接口所有的类和方法。</p>

<p>{{InheritanceDiagram(600, 120)}}</p>

<h2 id="属性">属性</h2>

<p><em>继承自其父类属性, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">名称</th>
   <th scope="col">类型</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>defaultSelected</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>包含了{{htmlattrxref("selected", "option")}} HTML 特性的初始值, 指示默认情况下是否选择该选项。</td>
  </tr>
  <tr>
   <td><code>disabled</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>反映了{{htmlattrxref("disabled", "option")}} HTML 特性 的值 , 这意味着选项(option)是不可选的。如果一个选项是关闭的{{HTMLElement("optgroup")}}元素的子元素,那么它也可被关闭。 </td>
  </tr>
  <tr>
   <td><code>form</code>{{readonlyInline}}</td>
   <td>{{domxref("HTMLFormElement")}}</td>
   <td>
    <p>如果该选项是{{HTMLElement("select")}} 元素的后代,则该属性与相应{{DomXref("HTMLSelectElement")}} 对象的<code>form</code>属性具有相同的值; 否则为<code>null</code></p>
   </td>
  </tr>
  <tr>
   <td><code>index</code>{{readonlyInline}}</td>
   <td><code>long</code></td>
   <td>
    <p>该选项在其所属的选项列表中的位置,以树形顺序排列。 如果该选项不是选项列表的一部分,例如为 {{HTMLElement("datalist")}} 元素的一部分时,该值为<code>0</code></p>
   </td>
  </tr>
  <tr>
   <td><code>label</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>反映{{htmlattrxref("label", "option")}} HTML特性的值,该属性为选项提供了一个标签。 如果没有特别设置此属性,读取它返回元素的文本内容。</p>
   </td>
  </tr>
  <tr>
   <td><code>selected</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>表示当前该option是否被选择。</td>
  </tr>
  <tr>
   <td><code>text</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>包含元素的文本内容。</td>
  </tr>
  <tr>
   <td><code>value</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>反映{{htmlattrxref("value", "option")}} HTML特性的值(如果存在);否则反映{{domxref("Node.textContent")}} 特性的值。</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="方法">方法</h2>

<p><em>方法继承自其父类, {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLOptionElement.Option()")}}是一个创建<code>HTMLOptionElement</code>对象的构造函数。 它有四个值:要显示的文本,<code>文本</code>,关联的值,<code></code>,defaultSelected的值以及<code>所选</code>的值。 最后三个值是可选的。</dt>
</dl>

<h2 id="格式">格式</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">格式</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>一个构造函数<code>Option()</code>已经被添加。<code>form</code>属性可以是<code>null</code>值。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td><code>selected</code>属性改变了它的含义:现在它指示当前是否选择该选项,如果该选项被初始选择,则不再使用该选项。<code>defaultSelected</code>属性不再是只读的。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.HTMLOptionElement")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>实现此接口的HTML元素 : {{HTMLElement("option")}}</li>
</ul>