Revision 1015317 of HTMLSelectElement

<div>{{APIRef("HTML DOM")}}</div>

<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p>

<h2 id="Properties">Properties</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>Is a {{jsxref("Boolean")}} that reflects 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>Is a {{jsxref("Boolean")}} that reflects 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>Returns a {{domxref("HTMLFormElement")}} representing 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>Returns a {{domxref("NodeList")}} containing the list of label elements associated with this select element.</dd>
 <dt>{{domxref("HTMLSelectElement.length")}}</dt>
 <dd>Is an <code>unsigned long</code> representing the number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd>
 <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
 <dd>Is a {{jsxref("Boolean")}} that reflects the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd>
 <dt>{{domxref("HTMLSelectElement.name")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects 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>Returns a {{domxref("HTMLOptionsCollection")}} containing the set of {{HTMLElement("option")}} elements contained by this element.</dd>
 <dt>{{domxref("HTMLSelectElement.required")}}</dt>
 <dd>Is a {{jsxref("Boolean")}} that reflects 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>Is a&nbsp;<code>long</code> that reflects 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>Returns a live {{domxref("HTMLCollection")}} containing the set of options that are selected.</dd>
 <dt>{{domxref("HTMLSelectElement.size")}}</dt>
 <dd>Is a <code>long</code> that reflects 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>Returns a {{domxref("DOMString")}} 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>Returns a {{domxref("DOMString")}} containing 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>Returns a {{domxref("ValidityState")}} representing the validity state that this control is in.</dd>
 <dt>{{domxref("HTMLSelectElement.value")}}</dt>
 <dd>Is a {{domxref("DOMString")}} with the value of this form control, that is, of the first selected option.</dd>
 <dt>{{domxref("HTMLSelectElement.willValidate")}}{{readonlyInline}}</dt>
 <dd>Is 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("HTMLElement.blur", "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("HTMLElement.focus", "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="Example">Example</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
&lt;select id='s'&gt;
&nbsp; &nbsp;&nbsp;&lt;option&gt;First&lt;/option&gt;
&nbsp; &nbsp;&nbsp;&lt;option selected&gt;Second&lt;/option&gt;
&nbsp; &nbsp;&nbsp;&lt;option&gt;Third&lt;/option&gt;
&lt;/select&gt;
*/

var select = document.getElementById('s');

// return the index of the selected option
console.log(select.selectedIndex);&nbsp;// 1

// return the value of the selected option
console.log(select.options[select.selectedIndex].value) // Second
</pre>

<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</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)}}</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>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</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>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>{{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>{{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>{{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>{{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}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] See {{bug("556743")}}.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The {{HTMLElement("select")}} HTML element, implementing this interface.</li>
</ul>