From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/htmlselectelement/autofocus/index.html | 70 +++++++++ files/ja/web/api/htmlselectelement/index.html | 164 +++++++++++++++++++++ .../web/api/htmlselectelement/options/index.html | 78 ++++++++++ 3 files changed, 312 insertions(+) create mode 100644 files/ja/web/api/htmlselectelement/autofocus/index.html create mode 100644 files/ja/web/api/htmlselectelement/index.html create mode 100644 files/ja/web/api/htmlselectelement/options/index.html (limited to 'files/ja/web/api/htmlselectelement') diff --git a/files/ja/web/api/htmlselectelement/autofocus/index.html b/files/ja/web/api/htmlselectelement/autofocus/index.html new file mode 100644 index 0000000000..b74bec952a --- /dev/null +++ b/files/ja/web/api/htmlselectelement/autofocus/index.html @@ -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 プロパティは {{htmlattrxref("autofocus", "select")}} HTML属性を反映した {{jsxref("Boolean")}} です。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。

+ +

ドキュメント内のフォームに関連した、一つの要素だけがこの属性を指定できます。もし複数あった場合、属性がセットされた最初の要素 (通常はページの最初の要素) が初期のフォーカスを得ます。

+ +
+

このプロパティを設定しても、関連付けられてた {{HTMLElement("select")}} 要素へフォーカスはセットされません: 単純にドキュメントへ 要素が挿入された ときにブラウザへフォーカスするように指示するだけです。挿入後の設定、ドキュメントが読み込まれた後のほとんどの時間では、目に見える効果はありません。

+
+ +

文法Edit

+ +
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 W3C', '#dom-htmlinputelement-autofocus', 'autofocus')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザー実装状況

+ + + +

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

diff --git a/files/ja/web/api/htmlselectelement/index.html b/files/ja/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..bdbd0b3c2a --- /dev/null +++ b/files/ja/web/api/htmlselectelement/index.html @@ -0,0 +1,164 @@ +--- +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つだけです。 {{gecko_minversion_inline("2.0")}}
+
{{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")}} 属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。 {{gecko_minversion_inline("2.0")}}
+
{{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/options/index.html b/files/ja/web/api/htmlselectelement/options/index.html new file mode 100644 index 0000000000..60babda93d --- /dev/null +++ b/files/ja/web/api/htmlselectelement/options/index.html @@ -0,0 +1,78 @@ +--- +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