---
title: HTMLSelectElement
slug: Web/API/HTMLSelectElement
tags:
  - API
  - HTML DOM
  - HTMLSelectElement
  - Interface
  - Reference
translation_of: Web/API/HTMLSelectElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><code><strong>HTMLSelectElement</strong></code> インターフェイスは HTML の {{HTMLElement("select")}} 要素を表します。これらの要素は {{domxref("HTMLElement")}} インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。</p>

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

<h2 id="Properties">プロパティ</h2>

<p><em>このインターフェイスは {{domxref("HTMLElement")}} と、 {{domxref("Element")}} および {{domxref("Node")}} からプロパティを継承しています。</em></p>

<dl>
 <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
 <dd>{{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("autofocus", "select")}} 属性を反映し、ページが読み込みの際に、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは 1 つだけです。</dd>
 <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
 <dd>{{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("disabled", "select")}} 属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。</dd>
 <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("HTMLFormElement")}} で、この要素が関連付けられているフォームを反映します。この要素が {{HTMLElement("form")}} 要素に関連付けられていなければ、 <code>null</code> を返します。</dd>
 <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("NodeList")}} で、この要素に関連付けられた {{HTMLElement("label")}} 要素を表します。</dd>
 <dt>{{domxref("HTMLSelectElement.length")}}</dt>
 <dd><code>unsigned long</code> で、 {{HTMLElement("option")}} 要素がこの <code>select</code> 要素に含まれる数です。</dd>
 <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
 <dd>{{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("multiple", "select")}} 要素を反映し、複数の項目を選択することができるかどうかを示します。</dd>
 <dt>{{domxref("HTMLSelectElement.name")}}</dt>
 <dd>{{domxref("DOMString")}} で、 HTML の {{htmlattrxref("name", "select")}} 属性を反映し、サーバーおよび DOM 検索機能で使用されるこのコントロールの名前が入ります。</dd>
 <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("HTMLOptionsCollection")}} で、この要素に含まれる一連の {{HTMLElement("option")}} 要素を表します。</dd>
 <dt>{{domxref("HTMLSelectElement.required")}}</dt>
 <dd>{{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("required", "select")}} 属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。</dd>
 <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
 <dd><code>long</code> で、最初に選択された {{HTMLElement("option")}} 要素の序数を反映します。 <code>-1</code> の値は要素が選択されていないことを示します。</dd>
 <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("HTMLCollection")}} で、選択されているすべての {{HTMLElement("option")}} 要素を反映します。</dd>
 <dt>{{domxref("HTMLSelectElement.size")}}</dt>
 <dd><code>long</code> で、 HTML の {{htmlattrxref("size", "select")}} 属性を反映し、コントロール内で見える項目の数が入ります。既定値は、 <code>multiple</code> が <code>true</code> でなければ 1 で、そうでなければ 4 です。</dd>
 <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("DOMString")}} で、フォームコントロールの型を表します。 <code>multiple</code> が <code>true</code> である場合は <code>select-multiple</code> を返し、そうでなければ <code>select-one</code> を返します。</dd>
 <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (<code>willValidate</code> が <code>false</code> の場合) や、制約を満たしている場合は空文字列になります。</dd>
 <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt>
 <dd>{{domxref("ValidityState")}} で、このボタンがある妥当性の状態を表します。</dd>
 <dt>{{domxref("HTMLSelectElement.value")}}</dt>
 <dd>{{domxref("DOMString")}} で、このフォームコントロールの値を反映します。選択されている option 要素があれば最初のものの <code>value</code> プロパティを返し、そうでなければ空文字列を返します。</dd>
 <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt>
 <dd>{{jsxref("Boolean")}} で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は <code>false</code> となります。</dd>
</dl>

<h2 id="Methods">メソッド</h2>

<p><em>このインターフェイスは {{domxref("HTMLElement")}} と、 {{domxref("Element")}} および {{domxref("Node")}} からメソッドを継承しています。</em></p>

<dl>
 <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
 <dd>要素をこの <code>select</code> 要素にある <code>option</code> 要素の集合に加えます。</dd>
 <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt>
 <dd>この要素から入力フォーカスを外します。<em>このメソッドは {{domxref("HTMLElement")}} で実装されました</em>。</dd>
 <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
 <dd>要素に何らかの制約があるか、それを満たしているかをチェックします。要素が制約に違反していた場合、ブラウザーはキャンセル可能な {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを要素に送ります (そして <code>false</code> を返します)。</dd>
 <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt>
 <dd>Gives input focus to this element. <em>このメソッドは {{domxref("HTMLElement")}} で実装されました</em>。</dd>
 <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
 <dd>この {{HTMLElement("select")}} 要素の選択肢の集合から項目を取得します。配列風に角括弧または括弧で序数を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。</dd>
 <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
 <dd>選択肢の集合から指定した名前で項目を取得します。名前の文字列は option ノードの <code>id</code> または <code>name</code> 属性と一致させることができます。配列風に角括弧または括弧で名前を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。</dd>
 <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
 <dd>この <code>select</code> 要素の選択肢の集合から、指定された序数の要素を削除します。</dd>
 <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt>
 <dd>このメソッドは、この要素の制約の問題があれば、ユーザーに報告します。問題があれば、キャンセル可能な {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを要素で発生させ、 <code>false</code> を返します。問題がなければ、 <code>true</code> を返します。</dd>
 <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
 <dd>選択要素の独自の検証メッセージを指定されたメッセージに設定します。要素に独自の検証エラーが<em>ない</em>ことを示すには、空文字列を使用してください。</dd>
</dl>

<h2 id="Events">イベント</h2>

<p>これらのイベントを待ち受けするには {{domxref("EventTarget/addEventListener", "addEventListener()")}} を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかしてください。</p>

<dl>
 <dt>{{domxref("HTMLElement/input_event", "input")}} イベント</dt>
 <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素の <code>value</code> が変化したときに発生します。</dd>
</dl>

<h2 id="Example">例</h2>

<h3 id="Get_information_about_the_selected_option">選択された選択肢についての情報を得る</h3>

<pre class="brush: js">/* 以下の HTML があることを想定する
&lt;select id='s'&gt;
    &lt;option&gt;First&lt;/option&gt;
    &lt;option selected&gt;Second&lt;/option&gt;
    &lt;option&gt;Third&lt;/option&gt;
&lt;/select&gt;
*/

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

// 選択された選択肢の序数を返す
console.log(select.selectedIndex); // 1

// 選択された選択肢の値を返す
console.log(select.options[select.selectedIndex].value) // Second
</pre>

<p>ユーザーの選択の変更を追跡するのであれば、 {{domxref("HTMLElement/change_event", "change")}} イベントが <code>&lt;select&gt;</code> に発生するのを監視するほうがより良い方法です。これは値が変化したときに通知され、必要なものを更新することができます。詳しくは、 <code>change</code> イベントのドキュメントで<a href="/ja/docs/Web/API/HTMLElement/change_event#&lt;select>_element">提供されている例</a>を参照してください。</p>

<h2 id="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>{{SpecName('HTML5 W3C')}} の最新のスナップショットから、 <code>autocomplete</code> プロパティと <code>reportValidity()</code> メソッドを追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>{{SpecName("HTML WHATWG")}} のスナップショット。<br>
    <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code>, <code>validationMessage</code> の各プロパティを追加。<br>
    <code>tabindex</code> プロパティと <code>blur()</code> および <code>focus()</code> メソッドを {{domxref("HTMLElement")}} へ移動。<br>
    <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> <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> が {{domxref("HTMLOptionsCollection")}} を返すようになった。<br>
    <code>length</code> が <code>unsigned long</code> を返すようになった。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

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

<h2 id="See_also">関連情報</h2>

<ul>
 <li>このインターフェイスを実装している HTML 要素: {{ HTMLElement("select") }}</li>
</ul>