From ed4edb19c89e81e9f6e68f6820b166d106519be6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 28 Oct 2021 02:00:01 +0900 Subject: Web/API/HTMLSelectElement 以下の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/27 時点の英語版に同期 - add, checkValidity, disabled, form, labels, namedItem, remove, selectedIndex, selectedOptions, setCustomValidaty, type については新規翻訳 --- files/ja/web/api/htmlselectelement/add/index.md | 143 ++++++++++++ .../web/api/htmlselectelement/autofocus/index.md | 80 +++---- .../api/htmlselectelement/checkvalidity/index.md | 34 +++ .../ja/web/api/htmlselectelement/disabled/index.md | 66 ++++++ files/ja/web/api/htmlselectelement/form/index.md | 58 +++++ files/ja/web/api/htmlselectelement/index.md | 250 +++++++++------------ files/ja/web/api/htmlselectelement/item/index.md | 109 ++++----- files/ja/web/api/htmlselectelement/labels/index.md | 59 +++++ .../web/api/htmlselectelement/nameditem/index.md | 63 ++++++ .../ja/web/api/htmlselectelement/options/index.md | 81 +++---- files/ja/web/api/htmlselectelement/remove/index.md | 62 +++++ .../api/htmlselectelement/selectedindex/index.md | 63 ++++++ .../api/htmlselectelement/selectedoptions/index.md | 118 ++++++++++ .../htmlselectelement/setcustomvalidity/index.md | 38 ++++ files/ja/web/api/htmlselectelement/type/index.md | 54 +++++ 15 files changed, 971 insertions(+), 307 deletions(-) create mode 100644 files/ja/web/api/htmlselectelement/add/index.md create mode 100644 files/ja/web/api/htmlselectelement/checkvalidity/index.md create mode 100644 files/ja/web/api/htmlselectelement/disabled/index.md create mode 100644 files/ja/web/api/htmlselectelement/form/index.md create mode 100644 files/ja/web/api/htmlselectelement/labels/index.md create mode 100644 files/ja/web/api/htmlselectelement/nameditem/index.md create mode 100644 files/ja/web/api/htmlselectelement/remove/index.md create mode 100644 files/ja/web/api/htmlselectelement/selectedindex/index.md create mode 100644 files/ja/web/api/htmlselectelement/selectedoptions/index.md create mode 100644 files/ja/web/api/htmlselectelement/setcustomvalidity/index.md create mode 100644 files/ja/web/api/htmlselectelement/type/index.md (limited to 'files/ja/web/api/htmlselectelement') diff --git a/files/ja/web/api/htmlselectelement/add/index.md b/files/ja/web/api/htmlselectelement/add/index.md new file mode 100644 index 0000000000..350fd04780 --- /dev/null +++ b/files/ja/web/api/htmlselectelement/add/index.md @@ -0,0 +1,143 @@ +--- +title: HTMLSelectElement.add() +slug: Web/API/HTMLSelectElement/add +tags: + - API + - HTML DOM + - HTMLSelectElement + - メソッド + - リファレンス +browser-compat: api.HTMLSelectElement.add +translation_of: Web/API/HTMLSelectElement/add +--- +{{APIRef("HTML DOM")}} + +**`HTMLSelectElement.add()`** メソッドは、この `select` 要素が持つ `option` 要素の集合に要素を追加します。 + +## 構文 + +```js +collection.add(item[, before]); +``` + +### 引数 + +- _item_ は {{domxref("HTMLOptionElement")}} または + {{domxref("HTMLOptGroupElement")}} です +- _before_ は省略可能で、集合内の要素または _long_ 型の位置を指定し、_item_ を挿入する直後のい位置を表します。この引数が `null` (または存在しない位置) であった場合、新しい要素は集合の末尾に追加されます。 + +### 例外 + +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : このメソッドに渡された _item_ が {{domxref("HTMLSelectElement")}} の祖先であった場合に発生します。 + +## 例 + +### 一から要素を作成 + +```js +var sel = document.createElement("select"); +var opt1 = document.createElement("option"); +var opt2 = document.createElement("option"); + +opt1.value = "1"; +opt1.text = "Option: Value 1"; + +opt2.value = "2"; +opt2.text = "Option: Value 2"; + +sel.add(opt1, null); +sel.add(opt2, null); + +/* + 理想的には下記のように生成します。 + + +*/ +``` + +before 引数は省略可能ですので、以下のようにすることもできます。 + +```js +... +sel.add(opt1); +sel.add(opt2); +... +``` + +### 既存の集合に追加 + +```js +var sel = document.getElementById("existingList"); + +var opt = document.createElement("option"); +opt.value = "3"; +opt.text = "Option: Value 3"; + +sel.add(opt, null); + +/* + 以下のような select オブジェクトがあったとします。 + + + + すると、次のように変わります。 + + +*/ +``` + +before 引数は省略可能ですので、以下のようにすることもできます。 + +```js +... +sel.add(opt); +... +``` + +### 既存の集合への挿入 + +```js +var sel = document.getElementById("existingList"); + +var opt = document.createElement("option"); +opt.value = "3"; +opt.text = "Option: Value 3"; + +sel.add(opt, sel.options[1]); + +/* + 以下のような select オブジェクトがあったとします。 + + + + すると、次のように変わります。 + + +*/ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/htmlselectelement/autofocus/index.md b/files/ja/web/api/htmlselectelement/autofocus/index.md index e3374e8fc3..79fdfd1146 100644 --- a/files/ja/web/api/htmlselectelement/autofocus/index.md +++ b/files/ja/web/api/htmlselectelement/autofocus/index.md @@ -2,69 +2,51 @@ title: HTMLSelectElement.autofocus slug: Web/API/HTMLSelectElement/autofocus tags: -- API -- HTML forms -- HTMLSelectElement -- Property -- Reference + - API + - HTML フォーム + - HTMLSelectElement + - プロパティ + - リファレンス +browser-compat: api.HTMLSelectElement.autofocus translation_of: Web/API/HTMLSelectElement/autofocus --- -

{{ APIRef("HTML DOM") }}

+{{ APIRef("HTML DOM") }} -

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

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

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

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

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

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

構文

+## 構文 -
aBool = aSelectElement.autofocus; // Get the value of autofocus
-aSelectElement.autofocus = aBool; // Set the value of autofocus
-
+```js +aBool = aSelectElement.autofocus; // autofocus の値を取得 +aSelectElement.autofocus = aBool; // autofocus の値を設定 +``` -

例

+## 例 -

HTML

+### HTML -
<select id="mySelect" autofocus>
-  <option>Option 1</option>
-  <option>Option 2</option>
-</select>
-
+```html + +``` -

JavaScript

+### JavaScript -
// Check if the autofocus attribute on the <select>
+```js
+// 
+
+
+
+
+```
+
+### JavaScript
+
+```js
+var allowDrinksCheckbox = document.getElementById("allow-drinks");
+var drinkSelect = document.getElementById("drink-select");
+
+allowDrinksCheckbox.addEventListener("change", function(event) {
+  if (event.target.checked) {
+    drinkSelect.disabled = false;
+  } else {
+    drinkSelect.disabled = true;
+  }
+}, false);
+```
+
+### 結果
+
+{{EmbedLiveSample('Example')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlselectelement/form/index.md b/files/ja/web/api/htmlselectelement/form/index.md
new file mode 100644
index 0000000000..dbaca36aba
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/form/index.md
@@ -0,0 +1,58 @@
+---
+title: HTMLSelectElement.form
+slug: Web/API/HTMLSelectElement/form
+tags:
+  - API
+  - HTMLSelectElement
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+browser-compat: api.HTMLSelectElement.form
+translation_of: Web/API/HTMLSelectElement/form
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.form`** は読み取り専用のプロパティで、この要素が関連付けられているフォームを表す {{domxref("HTMLFormElement")}} を返します。この要素が {{HTMLElement("form")}} 要素に関連付けられていなかった場合は、`null` を返します。
+
+## 構文
+
+```js
+aForm = aSelectElement.form.selectname;
+```
+
+## 例
+
+### HTML
+
+```html
+

+  
+

+```
+
+### Javascript
+
+すべてのフォーム要素で使用できるプロパティである "type" は、呼び出し元のフォーム要素の型を返します。SELECT の場合、選択リストの種類に応じて "`select-one`" または "`select-multiple`" の値を取ります。以下のコードは特定のフォーム内のすべての SELECT 要素に CSS の "`selectclass`" クラスを設定します。
+
+```html
+
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlselectelement/index.md b/files/ja/web/api/htmlselectelement/index.md
index 5339fb80d3..3b01e27209 100644
--- a/files/ja/web/api/htmlselectelement/index.md
+++ b/files/ja/web/api/htmlselectelement/index.md
@@ -5,101 +5,99 @@ tags:
   - API
   - HTML DOM
   - HTMLSelectElement
-  - Interface
-  - Reference
+  - インターフェイス
+  - リファレンス
+browser-compat: api.HTMLSelectElement
 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>
+{{APIRef("HTML DOM")}}
+
+**`HTMLSelectElement`** インターフェイスは HTML の {{HTMLElement("select")}} 要素を表します。これらの要素は {{domxref("HTMLElement")}} インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。
+
+{{InheritanceDiagram(600, 120)}}
+
+## プロパティ
+
+_このインターフェイスは {{domxref("HTMLElement")}}、{{domxref("Element")}}、{{domxref("Node")}} からプロパティを継承しています。_
+
+- {{domxref("HTMLSelectElement.autofocus")}}
+  - : 論理値で、 HTML の {{htmlattrxref("autofocus", "select")}} 属性を反映し、ページが読み込みの際に、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは 1 つだけです。
+- {{domxref("HTMLSelectElement.disabled")}}
+  - : 論理値で、 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")}}
+  - : 論理値で、 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")}}
+  - : 論理値で、 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}}
+  - : 論理値で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は `false` となります。
+
+## メソッド
+
+_このインターフェイスは {{domxref("HTMLElement")}}、{{domxref("Element")}}、{{domxref("Node")}} からメソッドを継承しています。_
+
+- {{domxref("HTMLSelectElement.add()")}}
+  - : 要素をこの `select` 要素にある `option` 要素の集合に加えます。
+- {{domxref("HTMLSelectElement.blur()")}}{{deprecated_inline}}
+  - : この要素から入力フォーカスを外します。_このメソッドは {{domxref("HTMLElement")}} での実装になりました_。
+- {{domxref("HTMLSelectElement.checkValidity()")}}
+  - : 要素に何らかの制約があるか、それを満たしているかをチェックします。要素が制約に違反していた場合、ブラウザーはキャンセル可能な {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを要素に送ります (そして `false` を返します)。
+- {{domxref("HTMLSelectElement.focus()")}}{{deprecated_inline}}
+  - : この要素に入力フォーカスを与えます。_このメソッドは {{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/change_event", "change")}} イベント
+  - : {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、ユーザーが要素の値の変更を確定したときに発行されます。
+- {{domxref("HTMLElement/input_event", "input")}} イベント
+  - : {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素の `value` が変化したときに発行されます。
+
+## 例
+
+### 選択された選択肢についての情報を得る
+
+```js
+/* 以下の HTML があると仮定します
+
 */
 
 var select = document.getElementById('s');
@@ -109,54 +107,18 @@ 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")}}

-
-
関連情報

-
-
+```
+
+ユーザーの選択の変更を追跡するのであれば、 {{domxref("HTMLElement/change_event", "change")}} イベントが `
+    
+    
+  
+
+```
 
-
JavaScript

+### JavaScript
 
-
// Returns the HTMLOptionElement representing #o2
+```css
+// 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")}}

-
-
関連情報

-
-
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 実装先の {{domxref("HTMLSelectElement")}}
diff --git a/files/ja/web/api/htmlselectelement/labels/index.md b/files/ja/web/api/htmlselectelement/labels/index.md
new file mode 100644
index 0000000000..6402994378
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/labels/index.md
@@ -0,0 +1,59 @@
+---
+title: HTMLSelectElement.labels
+slug: Web/API/HTMLSelectElement/labels
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - プロパティ
+  - リファレンス
+browser-compat: api.HTMLSelectElement.labels
+translation_of: Web/API/HTMLSelectElement/labels
+---
+{{APIRef("DOM")}}
+
+**`HTMLSelectElement.labels`** は読み取り専用のプロパティで、{{HTMLElement("select")}} 要素に関連付けられた {{HTMLElement("label")}} 要素の {{domxref("NodeList")}} を返します。
+
+## 構文
+
+```js
+var labelElements = select.labels;
+```
+
+### 返値
+
+{{domxref("NodeList")}} で、`
+  
+  
+
+
+```
+
+### JavaScript
+
+```js
+window.addEventListener("DOMContentLoaded", function() {
+  const select = document.getElementById("test");
+  for(var i = 0; i < select.labels.length; i++) {
+    console.log(select.labels[i].textContent); // "Label 1" and "Label 2"
+  }
+});
+```
+
+{{EmbedLiveSample("Example", "100%", 30)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlselectelement/nameditem/index.md b/files/ja/web/api/htmlselectelement/nameditem/index.md
new file mode 100644
index 0000000000..36148d3b00
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/nameditem/index.md
@@ -0,0 +1,63 @@
+---
+title: HTMLSelectElement.namedItem()
+slug: Web/API/HTMLSelectElement/namedItem
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - メソッド
+  - リファレンス
+browser-compat: api.HTMLSelectElement.namedItem
+translation_of: Web/API/HTMLSelectElement/namedItem
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.namedItem()`** メソッドは、{{domxref("HTMLOptionElement")}} のうち `name` または `id` が指定された名前に一致する {{domxref("HTMLOptionElement")}} を、一致するものがない場合は `null` を返します。
+
+JavaScript では、配列のブラケット構文に {{jsxref("String")}} を使用すると (`selectElt["value"]` など)、`selectElt.namedItem("value")` と同等になります。
+
+## 構文
+
+```js
+var item = collection.namedItem(str);
+var item = collection[str];
+```
+
+### 引数
+
+- `str` is a {{domxref("DOMString")}}.
+
+### 返値
+
+- `item` is a {{domxref("HTMLOptionElement")}}.
+
+## 例
+
+### HTML
+
+```html
+

+  
+

+```
+
+### JavaScript
+
+```js
+elem1 = document.forms[0]['myFormControl']['o1']; // Returns the HTMLOptionElement representing #o1
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 実装先の {{domxref("HTMLSelectElement")}} 
diff --git a/files/ja/web/api/htmlselectelement/options/index.md b/files/ja/web/api/htmlselectelement/options/index.md
index 9104769ff0..1af533e1e4 100644
--- a/files/ja/web/api/htmlselectelement/options/index.md
+++ b/files/ja/web/api/htmlselectelement/options/index.md
@@ -5,72 +5,55 @@ tags:
   - API
   - HTMLSelectElement
   - Options
-  - Property
-  - Read-only
-  - Web
-  - ウェブ
   - プロパティ
+  - 読み取り専用
+  - ウェブ
+browser-compat: api.HTMLSelectElement.options
 translation_of: Web/API/HTMLSelectElement/options
 ---
-
{{APIRef("DOM")}}

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

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

+## 構文
 
-
var options = select.options;
-

+```js
+var options = select.options;
+```
 
-
返値

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

+{{domxref("HTMLOptionsCollection")}} で、`
+  
+  
+
+```
 
-
JavaScript

+### JavaScript
 
-
window.addEventListener("DOMContentLoaded", function() {
+```js
+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"
+  for(var i = 0; i < select.options.length; i++) {
+    console.log(select.options[i].label); // "Option 1" および "Option 2"
   }
-});

+});
+```
 
-
{{EmbedLiveSample("Example", "100%", 30)}}

+{{EmbedLiveSample("Example", "100%", 30)}}
 
-
仕様書

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

+{{Specifications}}
 
-
ブラウザーの対応

+## Browser compatibility
 
-
{{Compat("api.HTMLSelectElement.options")}}

+{{Compat}}
diff --git a/files/ja/web/api/htmlselectelement/remove/index.md b/files/ja/web/api/htmlselectelement/remove/index.md
new file mode 100644
index 0000000000..48e6484943
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/remove/index.md
@@ -0,0 +1,62 @@
+---
+title: HTMLSelectElement.remove()
+slug: Web/API/HTMLSelectElement/remove
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - メソッド
+  - リファレンス
+browser-compat: api.HTMLSelectElement.remove
+translation_of: Web/API/HTMLSelectElement/remove
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.remove()`** メソッドは、この select 要素の選択肢の集合から指定された位置の要素を削除します。
+
+## 構文
+
+```js
+collection.remove(index);
+```
+
+### 引数
+
+- `index` は long 値で、集合から削除する {{ domxref("HTMLOptionElement") }} の位置を表します。この位置の要素が見つからなかった場合は、このメソッドは効果がありません。
+
+## 例
+
+```js
+var sel = document.getElementById("existingList");
+sel.remove(1);
+
+/*
+  以下の select オブジェクトが既にあるとします。
+
+  
+
+  以下のように変化します。
+
+  
+*/
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ domxref("Element.remove") }} は、{{ domxref("HTMLSelectElement") }} 上で remove が引数無しに呼び出された場合に呼び出されるメソッドです。
+- 実装先の {{domxref("HTMLSelectElement") }}
diff --git a/files/ja/web/api/htmlselectelement/selectedindex/index.md b/files/ja/web/api/htmlselectelement/selectedindex/index.md
new file mode 100644
index 0000000000..2288f57d2e
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/selectedindex/index.md
@@ -0,0 +1,63 @@
+---
+title: HTMLSelectElement.selectedIndex
+slug: Web/API/HTMLSelectElement/selectedIndex
+tags:
+  - API
+  - HTML DOM
+  - HTML フォーム
+  - HTMLSelectElement
+  - プロパティ
+  - リファレンス
+browser-compat: api.HTMLSelectElement.selectedIndex
+translation_of: Web/API/HTMLSelectElement/selectedIndex
+---
+{{APIRef("HTML DOM")}}
+
+**`HTMLSelectElement.selectedIndex`** は `long` 値であり、選択されている {{HTMLElement("option")}} 要素のうち、`multiple` の値に応じて最初または最後のものを返します。`-1` の値は選択されている要素がないことを示します。
+
+## 構文
+
+```js
+var index = selectElem.selectedIndex;
+selectElem.selectedIndex = index;
+```
+
+
例

+
+### HTML
+
+```html
+
selectedIndex: 0

+
+
+```
+
+### JavaScript
+
+```js
+var selectElem = document.getElementById('select')
+var pElem = document.getElementById('p')
+
+// When a new