From 485a48198a98d7213af29b946d473c9c3329a6b1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 26 Oct 2021 23:36:43 +0900 Subject: HTMLSelectElement 以下の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlselectelement/autofocus/index.html | 70 --------- .../web/api/htmlselectelement/autofocus/index.md | 70 +++++++++ files/ja/web/api/htmlselectelement/index.html | 162 --------------------- files/ja/web/api/htmlselectelement/index.md | 162 +++++++++++++++++++++ files/ja/web/api/htmlselectelement/item/index.html | 85 ----------- files/ja/web/api/htmlselectelement/item/index.md | 85 +++++++++++ .../web/api/htmlselectelement/options/index.html | 76 ---------- .../ja/web/api/htmlselectelement/options/index.md | 76 ++++++++++ 8 files changed, 393 insertions(+), 393 deletions(-) delete mode 100644 files/ja/web/api/htmlselectelement/autofocus/index.html create mode 100644 files/ja/web/api/htmlselectelement/autofocus/index.md delete mode 100644 files/ja/web/api/htmlselectelement/index.html create mode 100644 files/ja/web/api/htmlselectelement/index.md delete mode 100644 files/ja/web/api/htmlselectelement/item/index.html create mode 100644 files/ja/web/api/htmlselectelement/item/index.md delete mode 100644 files/ja/web/api/htmlselectelement/options/index.html create mode 100644 files/ja/web/api/htmlselectelement/options/index.md (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/htmlselectelement/autofocus/index.html b/files/ja/web/api/htmlselectelement/autofocus/index.html deleted file mode 100644 index e3374e8fc3..0000000000 --- a/files/ja/web/api/htmlselectelement/autofocus/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: HTMLSelectElement.autofocus -slug: Web/API/HTMLSelectElement/autofocus -tags: -- API -- HTML forms -- HTMLSelectElement -- Property -- Reference -translation_of: Web/API/HTMLSelectElement/autofocus ---- -

{{ APIRef("HTML DOM") }}

- -

HTMLSelectElement.autofocus プロパティは、 HTML の {{htmlattrxref("autofocus", "select")}} 属性を反映した true または false の値を持ちます。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。

- -

この属性を指定することができるのは、 1 つの文書内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素 (通常は該当する要素のうちページで最初のもの) が初期のフォーカスを得ます。

- -
-

このプロパティを設定しても、関連付けられた {{HTMLElement("select")}} 要素へフォーカスは設定されません。単純に文書へ 要素が挿入された ときにブラウザーへフォーカスを移動するよう指示するだけです。挿入後に設定した場合、すなわち文書が読み込まれた後のほとんどの場合では、目に見える効果はありません。

-
- -

構文

- -
aBool = aSelectElement.autofocus; // Get the value of autofocus
-aSelectElement.autofocus = aBool; // Set the value of autofocus
-
- -

例

- -

HTML

- -
<select id="mySelect" autofocus>
-  <option>Option 1</option>
-  <option>Option 2</option>
-</select>
-
- -

JavaScript

- -
// Check if the autofocus attribute on the <select>
-var hasAutofocus = document.getElementById('mySelect').autofocus;
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-fe-autofocus', 'autofocus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', - 'sec-forms.html#autofocusing-a-form-control-the-autofocus-attribute', - 'autofocus')}}{{Spec2('HTML5.2')}}
- -

ブラウザーの互換性

- -

{{Compat("api.HTMLSelectElement.autofocus")}}

diff --git a/files/ja/web/api/htmlselectelement/autofocus/index.md b/files/ja/web/api/htmlselectelement/autofocus/index.md new file mode 100644 index 0000000000..e3374e8fc3 --- /dev/null +++ b/files/ja/web/api/htmlselectelement/autofocus/index.md @@ -0,0 +1,70 @@ +--- +title: HTMLSelectElement.autofocus +slug: Web/API/HTMLSelectElement/autofocus +tags: +- API +- HTML forms +- HTMLSelectElement +- Property +- Reference +translation_of: Web/API/HTMLSelectElement/autofocus +--- +

{{ APIRef("HTML DOM") }}

+ +

HTMLSelectElement.autofocus プロパティは、 HTML の {{htmlattrxref("autofocus", "select")}} 属性を反映した true または false の値を持ちます。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。

+ +

この属性を指定することができるのは、 1 つの文書内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素 (通常は該当する要素のうちページで最初のもの) が初期のフォーカスを得ます。

+ +
+

このプロパティを設定しても、関連付けられた {{HTMLElement("select")}} 要素へフォーカスは設定されません。単純に文書へ 要素が挿入された ときにブラウザーへフォーカスを移動するよう指示するだけです。挿入後に設定した場合、すなわち文書が読み込まれた後のほとんどの場合では、目に見える効果はありません。

+
+ +

構文

+ +
aBool = aSelectElement.autofocus; // Get the value of autofocus
+aSelectElement.autofocus = aBool; // Set the value of autofocus
+
+ +

例

+ +

HTML

+ +
<select id="mySelect" autofocus>
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+
+ +

JavaScript

+ +
// Check if the autofocus attribute on the <select>
+var hasAutofocus = document.getElementById('mySelect').autofocus;
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-fe-autofocus', 'autofocus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', + 'sec-forms.html#autofocusing-a-form-control-the-autofocus-attribute', + 'autofocus')}}{{Spec2('HTML5.2')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.HTMLSelectElement.autofocus")}}

diff --git a/files/ja/web/api/htmlselectelement/index.html b/files/ja/web/api/htmlselectelement/index.html deleted file mode 100644 index 5339fb80d3..0000000000 --- a/files/ja/web/api/htmlselectelement/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: HTMLSelectElement -slug: Web/API/HTMLSelectElement -tags: - - API - - HTML DOM - - HTMLSelectElement - - Interface - - Reference -translation_of: Web/API/HTMLSelectElement ---- -
{{APIRef("HTML DOM")}}
- -

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

- -

{{InheritanceDiagram(600, 120)}}

- -

プロパティ

- -

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

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

メソッド

- -

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

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

イベント

- -

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

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

例

- -

選択された選択肢についての情報を得る

- -
/* 以下の HTML があることを想定する
-<select id='s'>
-    <option>First</option>
-    <option selected>Second</option>
-    <option>Third</option>
-</select>
-*/
-
-var select = document.getElementById('s');
-
-// 選択された選択肢の序数を返す
-console.log(select.selectedIndex); // 1
-
-// 選択された選択肢の値を返す
-console.log(select.options[select.selectedIndex].value) // Second
-
- -

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

- -

仕様書

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

ブラウザーの互換性

- -

{{Compat("api.HTMLSelectElement")}}

- -

関連情報

- - diff --git a/files/ja/web/api/htmlselectelement/index.md b/files/ja/web/api/htmlselectelement/index.md new file mode 100644 index 0000000000..5339fb80d3 --- /dev/null +++ b/files/ja/web/api/htmlselectelement/index.md @@ -0,0 +1,162 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - HTMLSelectElement + - Interface + - Reference +translation_of: Web/API/HTMLSelectElement +--- +
{{APIRef("HTML DOM")}}
+ +

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

+ +

{{InheritanceDiagram(600, 120)}}

+ +

プロパティ

+ +

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

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

メソッド

+ +

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

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

イベント

+ +

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

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

例

+ +

選択された選択肢についての情報を得る

+ +
/* 以下の HTML があることを想定する
+<select id='s'>
+    <option>First</option>
+    <option selected>Second</option>
+    <option>Third</option>
+</select>
+*/
+
+var select = document.getElementById('s');
+
+// 選択された選択肢の序数を返す
+console.log(select.selectedIndex); // 1
+
+// 選択された選択肢の値を返す
+console.log(select.options[select.selectedIndex].value) // Second
+
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} の最新のスナップショットから、 autocomplete プロパティと reportValidity() メソッドを追加。
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}{{SpecName("HTML WHATWG")}} のスナップショット。
+ autofocus, form, required, labels, selectedOptions, willValidate, validity, validationMessage の各プロパティを追加。
+ tabindex プロパティと blur() および focus() メソッドを {{domxref("HTMLElement")}} へ移動。
+ item(), namedItem(), checkValidity() setCustomValidity() の各メソッドを追加。
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options が {{domxref("HTMLOptionsCollection")}} を返すようになった。
+ length が unsigned long を返すようになった。
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.HTMLSelectElement")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlselectelement/item/index.html b/files/ja/web/api/htmlselectelement/item/index.html deleted file mode 100644 index 0513a73fe7..0000000000 --- a/files/ja/web/api/htmlselectelement/item/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: HTMLSelectElement.item() -slug: Web/API/HTMLSelectElement/item -tags: -- API -- HTML DOM -- HTMLSelectElement -- Method -- Reference -translation_of: Web/API/HTMLSelectElement/item ---- -
{{ APIRef("HTML DOM") }}
- -

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

- -

JavaScript では、ブラケット構文に unsigned long の値を入れた selectElt[index] の形が、 selectElt.namedItem(index) と同等です。

- -

構文

- -
var item = collection.item(index);
-var item = collection[index];
-
- -

引数

- - - -

返値

- - - -

例

- -

HTML

- -
<form>
-  <select id="myFormControl">
-    <option id="o1">Opt 1</option>
-    <option id="o2">Opt 2</option>
-  </select>
-</form>
-
- -

JavaScript

- -
// Returns the HTMLOptionElement representing #o2
-elem1 = document.forms[0]['myFormControl'][1];
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', "#dom-select-item", "HTMLSelectElement.item()")}}{{Spec2('HTML WHATWG')}}最新のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "forms.html#dom-select-item", - "HTMLSelectElement.item()")}}{{Spec2('HTML5 W3C')}}初回定義、 {{SpecName('HTML WHATWG')}} のスナップショット。
- -

ブラウザーの互換性

- -

{{Compat("api.HTMLSelectElement.item")}}

- -

関連情報

- - diff --git a/files/ja/web/api/htmlselectelement/item/index.md b/files/ja/web/api/htmlselectelement/item/index.md new file mode 100644 index 0000000000..0513a73fe7 --- /dev/null +++ b/files/ja/web/api/htmlselectelement/item/index.md @@ -0,0 +1,85 @@ +--- +title: HTMLSelectElement.item() +slug: Web/API/HTMLSelectElement/item +tags: +- API +- HTML DOM +- HTMLSelectElement +- Method +- Reference +translation_of: Web/API/HTMLSelectElement/item +--- +
{{ APIRef("HTML DOM") }}
+ +

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

+ +

JavaScript では、ブラケット構文に unsigned long の値を入れた selectElt[index] の形が、 selectElt.namedItem(index) と同等です。

+ +

構文

+ +
var item = collection.item(index);
+var item = collection[index];
+
+ +

引数

+ + + +

返値

+ + + +

例

+ +

HTML

+ +
<form>
+  <select id="myFormControl">
+    <option id="o1">Opt 1</option>
+    <option id="o2">Opt 2</option>
+  </select>
+</form>
+
+ +

JavaScript

+ +
// Returns the HTMLOptionElement representing #o2
+elem1 = document.forms[0]['myFormControl'][1];
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "#dom-select-item", "HTMLSelectElement.item()")}}{{Spec2('HTML WHATWG')}}最新のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "forms.html#dom-select-item", + "HTMLSelectElement.item()")}}{{Spec2('HTML5 W3C')}}初回定義、 {{SpecName('HTML WHATWG')}} のスナップショット。
+ +

ブラウザーの互換性

+ +

{{Compat("api.HTMLSelectElement.item")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlselectelement/options/index.html b/files/ja/web/api/htmlselectelement/options/index.html deleted file mode 100644 index 9104769ff0..0000000000 --- a/files/ja/web/api/htmlselectelement/options/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: HTMLSelectElement.options -slug: Web/API/HTMLSelectElement/options -tags: - - API - - HTMLSelectElement - - Options - - Property - - Read-only - - Web - - ウェブ - - プロパティ -translation_of: Web/API/HTMLSelectElement/options ---- -
{{APIRef("DOM")}}
- -

HTMLSelectElement.options は読み取り専用のプロパティで、 {{HTMLElement("select")}} 要素に含まれる {{HTMLElement("option")}} 要素の {{domxref("HTMLOptionsCollection")}} を返します。

- -

構文

- -
var options = select.options;
-
- -

返値

- -

<select> 要素に含まれる <option> 要素の {{domxref("HTMLOptionsCollection")}} です。

- -

例

- -

HTML

- -
<label for="test">Label</label>
-<select id="test">
-  <option value="1">Option 1</option>
-  <option value="2">Option 2</option>
-</select>
-
- -

JavaScript

- -
window.addEventListener("DOMContentLoaded", function() {
-  const select = document.getElementById("test");
-  for(var i = 0; i < select.options.length; i++) {
-    console.log(select.options[i].label); // "Option 1" and "Option 2"
-  }
-});
- -

{{EmbedLiveSample("Example", "100%", 30)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "form-elements.html#the-select-element:htmloptionscollection", "options")}}{{Spec2("HTML WHATWG")}}変更なし
{{SpecName("HTML5 W3C", "forms.html#htmlselectelement", "options")}}{{Spec2("HTML5 W3C")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("api.HTMLSelectElement.options")}}

diff --git a/files/ja/web/api/htmlselectelement/options/index.md b/files/ja/web/api/htmlselectelement/options/index.md new file mode 100644 index 0000000000..9104769ff0 --- /dev/null +++ b/files/ja/web/api/htmlselectelement/options/index.md @@ -0,0 +1,76 @@ +--- +title: HTMLSelectElement.options +slug: Web/API/HTMLSelectElement/options +tags: + - API + - HTMLSelectElement + - Options + - Property + - Read-only + - Web + - ウェブ + - プロパティ +translation_of: Web/API/HTMLSelectElement/options +--- +
{{APIRef("DOM")}}
+ +

HTMLSelectElement.options は読み取り専用のプロパティで、 {{HTMLElement("select")}} 要素に含まれる {{HTMLElement("option")}} 要素の {{domxref("HTMLOptionsCollection")}} を返します。

+ +

構文

+ +
var options = select.options;
+
+ +

返値

+ +

<select> 要素に含まれる <option> 要素の {{domxref("HTMLOptionsCollection")}} です。

+ +

例

+ +

HTML

+ +
<label for="test">Label</label>
+<select id="test">
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+</select>
+
+ +

JavaScript

+ +
window.addEventListener("DOMContentLoaded", function() {
+  const select = document.getElementById("test");
+  for(var i = 0; i < select.options.length; i++) {
+    console.log(select.options[i].label); // "Option 1" and "Option 2"
+  }
+});
+ +

{{EmbedLiveSample("Example", "100%", 30)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "form-elements.html#the-select-element:htmloptionscollection", "options")}}{{Spec2("HTML WHATWG")}}変更なし
{{SpecName("HTML5 W3C", "forms.html#htmlselectelement", "options")}}{{Spec2("HTML5 W3C")}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("api.HTMLSelectElement.options")}}

-- cgit v1.2.3-54-g00ecf