---
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>