diff options
Diffstat (limited to 'files/zh-tw/web/api/htmlselectelement/index.html')
| -rw-r--r-- | files/zh-tw/web/api/htmlselectelement/index.html | 283 |
1 files changed, 283 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/htmlselectelement/index.html b/files/zh-tw/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..0110568dd6 --- /dev/null +++ b/files/zh-tw/web/api/htmlselectelement/index.html @@ -0,0 +1,283 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +translation_of: Web/API/HTMLSelectElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>HTMLSelectElement</strong></code> 介面代表了 {{HTMLElement("select")}} HTML 元素。此介面也自 {{domxref("HTMLElement")}} 介面繼承了所有 HTML 元素的屬性及方法。</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="屬性">屬性</h2> + +<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd> + <dt>{{domxref("HTMLSelectElement.disabled")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd> + <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd> + <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd> + <dt>{{domxref("HTMLSelectElement.length")}}</dt> + <dd>An <code>unsigned long </code>The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.multiple")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd> + <dt>{{domxref("HTMLSelectElement.name")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd> + <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} elements contained by this element.</dd> + <dt>{{domxref("HTMLSelectElement.required")}}</dt> + <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd> + <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt> + <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd> + <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt> + <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd> + <dt>{{domxref("HTMLSelectElement.size")}}</dt> + <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</dd> + <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd> + <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd> + <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt> + <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd> + <dt>{{domxref("HTMLSelectElement.value")}}</dt> + <dd>A {{domxref("DOMString")}} reflecting the value of the form control (the first selected option).</dd> + <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt> + <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLSelectElement.add()")}}</dt> + <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd> + <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt> + <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> + <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt> + <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</dd> + <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt> + <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd> + <dt>{{domxref("HTMLSelectElement.item()")}}</dt> + <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd> + <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt> + <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd> + <dt>{{domxref("HTMLSelectElement.remove()")}}</dt> + <dd>Removes the element at the specified index from the options collection for this select element.</dd> + <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt> + <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd> +</dl> + +<h2 id="範例">範例</h2> + +<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3> + +<pre class="brush: js">/* assuming we have the following HTML +<select id='s'> + <option>First</option> + <option selected>Second</option> + <option>Third</option> +</select> +*/ + +var select = document.getElementById('s'); + +// return the index of the selected option +console.log(select.selectedIndex); // 1 + +// return the value of the selected option +console.log(select.options[select.selectedIndex].value) // Second +</pre> + +<p>A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <code><select></code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/Events/change#Example_Change_event_on_a_select">the example provided</a> in the documentation for the <code>change</code> event for details.</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br> + It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br> + The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br> + The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br> + <code>length</code> now returns an <code>unsigned long</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}} <sup>[2]</sup></td> + <td>1.0</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>item()</code> and <code>namedItem()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop(2.0)}}</td> + <td>8<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(2.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>selectedOptions</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>labels</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>1.0</td> + <td>1.0</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>item()</code> and <code>namedItem()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(2.0)}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(2.0)}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>selectedOptions</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(26)}}</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>labels</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented in {{bug("556743")}}.</p> + +<p>[2] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code><option></code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code><select></code> element is displayed as a drop-down list. The behavior is unchanged if the <code><select></code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1. Rather than watching <code><option></code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p> + +<p>[3] namedItem does not appear to take the <code>name</code> attribute into account (only the <code>id</code> attribute) on Internet Explorer and Edge. There is a <a href="https://connect.microsoft.com/IE/feedbackdetail/view/2414092/">bug report</a> to Microsoft about this.</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li> +</ul> |