Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
1
18
1

は HTML の要素で、 select 要素内の選択肢のグループを作成します。

1
12
1
≤4
18
≤3.2

は HTML の要素で、select、optgroup、datalist の各要素内で選択肢を定義するために使われます。したがって、 は HTML 文書でポップアップメニューのメニュー選択肢や、その他の選択肢の一覧を表すことができます。

1
12
1
≤4
18
≤3.2
HTML 属性

disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。

1
12
1
7
18
label
1
12
1
≤4
18
≤3.2

disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。

1
12
1
≤4
18
≤3.2
label
1
12
1
≤4
18
≤3.2
selected
1
12
1
≤4
18
≤3.2
value
1
12
1
≤4
18
≤3.2

disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。

1
12
1
3
18
2

form は HTML の属性で、フォーム関連要素を、同じ文書内の form 要素に関連付けます。この属性は、button、fieldset、input、object、output、select、textarea の各要素に適用されます。

1
12
1
3
18
2
hr_in_select

<select>`の中の`<hr>`。

119
119
122
17
17.4

論理属性の multiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。この属性は input/email と input/file の入力型と select に対して有効です。ユーザーが複数の値を選択する方法は、フォームコントロールに依存します。

1
12
1
3
18
2
name
1
12
1
3
18
2

論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。

10
12
4
5.1
18
5

size 属性は、 input 要素の幅と select 要素の高さを定義します。 input については、 type 属性が input/text または input/password の場合は文字数です。これは 0 以上の整数でなければなりません。

1
12
1
3
142
DOM API

HTMLOptGroupElement インターフェイスは、(継承によって利用できる通常の HTMLElement オブジェクトインターフェイスのもの以外に)optgroup 要素のレイアウトや表示を操作するための特別なプロパティやメソッドを提供します。

1
12
1
3
18
1

HTMLOptGroupElement インターフェースの disabled プロパティは、コントロールが無効かどうかを示す optgroup 要素の disabled 属性を反映するブール値です。

1
12
1
7
18
1

HTMLOptGroupElement インターフェースの label プロパティは、optgroup 要素の label 属性を反映した文字列値で、オプション・グループにテキスト・ラベルを提供します。

1
12
1
3
18
1

HTMLOptionElement インターフェイスは option 要素を表し、 HTMLElement インターフェイスのすべてのクラスとメソッドを継承しています。

1
12
1
1.2
18
1

HTMLOptionElement インターフェイスの defaultSelected プロパティは、要素のデフォルトの選択状態を指定する。このプロパティは option 要素の selected 属性を反映する。selected 属性が存在すると、defaultSelected プロパティは true に設定されます。

1
12
1
3
18
1

HTMLOptionElementのdisabledプロパティは、オプション要素が選択不可能かどうかを示すブール値です。このプロパティはdisabled HTML属性の値を反映します。

1
12
1
3
18
1

HTMLOptionElement インターフェイスの form read-only プロパティは、このオプションに関連づけられた HTMLSelectElement を所有する HTMLFormElement オブジェクトを返します。

1
12
1
3
18
1

HTMLOptionElement インターフェイスの読み込み専用の index プロパティは、要素の 0 ベースのインデックスを指定します。がオプション・リストの一部でない場合、値は 0 です。

1
12
1
3
18
1

HTMLOptionElementの label プロパティは、select要素内のオプションやdatalist要素内の候補リストの一部として表示されるテキストを表します。これは option要素の label属性を反映します。

1
12
7
3
18
1

Option() コンストラクターは、新しい HTMLOptionElement を生成します。

1
12
1
1.2
18
1

HTMLOptionElementインターフェイスのselectedプロパティは、要素の現在のselectednessを指定します。

1
12
1
3
18
1

HTMLOptionElementのtextプロパティは、option要素内のテキストを表します。このプロパティはNode.textContentと同じ情報を表します。

1
12
1
3
18
1

HTMLOptionElement インターフェイスの value プロパティは、option 要素の値を文字列で表します。値が設定されていない場合は空文字列となります。そうでない場合は、Node.textContent プロパティと同様に、要素の内容を返したり設定したりします。

1
12
1
3
18
1

HTMLSelectElement インターフェイスは HTML の select 要素を表します。これらの要素は HTMLElement インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。

1
12
1
1
18
1

HTMLSelectElement.add() メソッドは、この select 要素が持つ option 要素の集合に要素を追加します。

1
12
1
3
18
1
add (index before parameter)

before`パラメータとしてのインデックス

35
12
8
9
35
9

autocomplete は HTMLSelectElement インターフェイスのプロパティで、ブラウザーによってコントロールの値が自動的に補完できるかどうかを示します。これは、 要素の autocomplete 属性を反映します。

66
79
59
9.1
66
9.3

HTMLSelectElement.disabled プロパティは論理値で、HTML の disabled 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。

1
12
1
3
18
1

HTMLSelectElement.form は読み取り専用のプロパティで、この要素が関連付けられているフォームを表す HTMLFormElement を返します。この要素が form 要素に関連付けられていなかった場合は、null を返します。

1
12
1
3
18
1

HTMLSelectElement.item() メソッドは、選択肢のリスト内で引数で渡された位置にある HTMLOptionElement に対応する Element を返します。存在しない場合は null を返します。

1
12
1
3
18
1

HTMLSelectElement.labels は読み取り専用のプロパティで、この select 要素に関連付けられた label 要素の NodeList を返します。

6
18
56
5.1
18
5

length は HTMLSelectElement インターフェイスのプロパティで、select 要素内の option 要素の数を指定します。これは、HTMLSelectElement.options コレクション内のノードの数を表します。設定すると、(HTMLOptionsCollection.length) として動作します。

1
12
1
3
18
1

multiple は HTMLSelectElement インターフェイスのプロパティで、ユーザーがオプションのリストから複数のオプションを選択できることを指定します。これは、select 要素の multiple 属性を反映しています。

1
12
1
3
18
1

name は HTMLSelectElement インターフェイスのプロパティで、このselect 要素の名前を示します。これは、この要素の name 属性を反映します。

1
12
1
3
18
1

HTMLSelectElement.namedItem() メソッドは、HTMLOptionElement のうち name または id が指定された名前に一致する HTMLOptionElement を、一致するものがない場合は null を返します。

1
12
1
3
18
1

HTMLSelectElement.options は読み取り専用のプロパティで、この select 要素に含まれる option のリストを HTMLOptionsCollection の形で返します。

1
12
1
3
18
1

HTMLSelectElement.remove() メソッドは、この select 要素の選択肢の集合から指定された位置の要素を削除します。

1
12
1
3
18
1

required は HTMLSelectElement インターフェイスのプロパティで、フォームを送信する前に、ユーザーが空ではない文字列値を持つオプションを選択しなければならないことを指定します。これは、select 要素の required 属性を反映したものです。

10
12
4
5.1
18
5

HTMLSelectElement.selectedIndex は long 値であり、選択されている option 要素のうち、multiple の値に応じて最初または最後のものを返します。-1 の値は選択されている要素がないことを示します。

1
12
1
3
18
1

読み取り専用の HTMLSelectElement の selectedOptions プロパティは、この select 要素にある現在選択中の option のリストが入ります。選択中の選択肢のリストは HTMLCollection オブジェクトで、選択中の選択肢ごとに 1 項目ずつ入ります。

19
12
26
6
25
6

size は HTMLSelectElement インターフェイスのプロパティで、一度に表示されるべきオプションの数、つまり行数を指定します。これは、この select 要素の size 属性を反映します。省略された場合、値は 0 です。

1
12
1
3
18
1

HTMLSelectElement.type は読み取り専用のプロパティで、フォームコントロールの type を返します。

1
12
1
3
18
1

HTMLSelectElement.value プロパティは、この select 要素に関連付けられた option 要素のうち、選択された最初のものの値を格納します。

1
12
1
3
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • webkit-appearance` が適切な値にオーバーライドされない限り、`<select>` 要素の `border-radius` は無視されます。
注釈 1件
実装メモ
  • 歴史的に、Firefox はキーボードとマウスイベントが `<option>` 要素から親要素の `<select>` 要素にバブルアップすることを許可してきましたが、この動作は多くのブラウザで一貫していません。より良い Web 互換性のために(そして技術的な理由で)、Firefox がマルチプロセスモードのとき、 `<select>` 要素はドロップダウンリストとして表示されます。もし `<select>` がインラインで表示され、multiple属性が定義されているか、size属性が1以上に設定されていれば、動作は変わりません。option>`要素のイベントを監視するのではなく、`<select>`の変更イベントを監視する必要があります。詳しくはバグ1090602を参照してください。
注釈 1件
実装メモ
  • webkit-appearance` が適切な値にオーバーライドされない限り、`<select>` 要素の `border-radius` は無視されます。
注釈 1件
実装メモ
  • webkit-appearance` が適切な値にオーバーライドされない限り、`<select>` 要素の `border-radius` は無視されます。
注釈 1件
実装メモ
  • webkit-appearance` が適切な値にオーバーライドされない限り、`<select>` 要素の `border-radius` は無視されます。
注釈 1件
実装メモ
  • Safari 7以前では、この属性を設定することはできますが、効果はありません。
注釈 1件
実装メモ
  • この属性は設定できるが、何の効果もない。
注釈 3件
実装メモ
  • 77以前では、要素の内容が空の場合、Firefoxは`label`属性の値をオプションテキストとして表示しませんでした。バグ 40545 を参照してください。
  • 歴史的に、Firefox はキーボードとマウスのイベントが `<option>` 要素から親要素の `<select>` 要素にバブルアップすることを許可してきました。より良い Web 互換性のために (そして技術的な理由で)、Firefox がマルチプロセスモードで `<select>` 要素がドロップダウンリストとして表示されている場合、それらはバブルアップされません。この動作は `<select>` がインラインで表示され、 `multiple` 属性が定義されているか、 `size` 属性が `1` 以上に設定されている場合に変更されません。イベントに対して `<option>` 要素を監視するのではなく、 `<select>` の変更イベントを監視する必要があります。詳しくはバグ 1090602 を参照してください。
削除済み
  • Mozilla が (Electrolysis (e10s) プロジェクトを通じて) Firefox に専用のコンテンツスレッドを導入した際、一時的に `<option>` 要素のスタイリングサポートが削除されました。Firefox 54 からは、CSS プロパティの `color` と `background-color` を使って `<option>` 要素に前景色と背景色を適用できるようになりました。詳しくはバグ 910022 を参照してください。なお、Linux ではコントラストが不足するため、これはまだ無効になっています (これに関する進捗はバグ 1338283 を参照してください)。
注釈 2件
実装メモ
  • メニューが展開されたときのみ、ページ内の `<hr>` を視覚的に表示する(折りたたまれているメニュー内で矢印を使っても表示されない)。
  • アクセシビリティツリーで`<hr>`を公開しない。
注釈 2件
実装メモ
  • メニューが展開されたときのみ、ページ内の `<hr>` を視覚的に表示する(折りたたまれているメニュー内で矢印を使っても表示されない)。
  • アクセシビリティツリーで`<hr>`を公開しない。
注釈 1件
実装メモ
  • アクセシビリティツリーで`<hr>`を公開しない。
注釈 1件
実装メモ
  • アクセシビリティツリーで`<hr>`を公開しない。
注釈 1件
実装メモ
  • アクセシビリティツリーで`<hr>`を公開しない。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (7)
実装メモ
  • このプロパティは設定できますが、効果はありません(バグ227042を参照)。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • このプロパティは設定できますが、効果はありません(バグ227042を参照)。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (7)
実装メモ
  • Firefox 7 より前のバージョンでは、`label` プロパティが定義されていない場合、要素のテキストコンテンツを返す代わりに空文字列を返していました。
注釈 1件
実装メモ
  • イベントに対して `<option>` 要素を監視する代わりに、`<select>` の変更イベントを監視する必要があります。詳しくはバグ 1090602 と マルチプロセス Firefox Web コンテンツの互換性 を参照してください。
注釈 1件
実装メモ
  • Internet ExplorerとEdgeでは、`namedItem`が`name`属性を考慮しないようです(`id`属性のみ)。これについてはマイクロソフトにバグレポートがあります。

基本構文

HTML
<label for="color">Select a color:</label>
<select id="color" name="color">
  <option value="">-- Please select --</option>
  <optgroup label="暖色">
    <option value="red">Red</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="寒色">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </optgroup>
</select>

ライブデモ

基本的なドロップダウン

select 要素で選択肢のドロップダウンリストを提供。

プレビュー全画面表示

optgroup でグループ化

optgroup 要素で選択肢をカテゴリ別にグループ化。

プレビュー全画面表示

複数選択

multiple 属性で複数の選択肢を同時に選択可能に。

プレビュー全画面表示

実務での使いどころ

  • <select> の活用

    <select> は HTML の要素で、選択式のメニューを提供するコントロールを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。