Web/API/HTMLSelectElement 以下の文書を更新

- 2021/10/27 時点の英語版に同期
- add, checkValidity, disabled, form, labels, namedItem, remove, selectedIndex, selectedOptions, setCustomValidaty, type については新規翻訳

15 files changed, 971 insertions, 307 deletions

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);
+
+/*
+  理想的には下記のように生成します。
+
+  <select>
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+  </select>
+*/
+```
+
+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 オブジェクトがあったとします。
+
+  <select id="existingList">
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+  </select>
+
+  すると、次のように変わります。
+
+  <select id="existingList">
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+    <option value="3">Option: Value 3</option>
+  </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 オブジェクトがあったとします。
+
+  <select id="existingList">
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+  </select>
+
+  すると、次のように変わります。
+
+  <select id="existingList">
+    <option value="1">Option: Value 1</option>
+    <option value="3">Option: Value 3</option>
+    <option value="2">Option: Value 2</option>
+  </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
 ---
-<p>{{ APIRef("HTML DOM") }}</p>
+{{ APIRef("HTML DOM") }}
 
-<p><code><strong>HTMLSelectElement.autofocus</strong></code> プロパティは、 HTML の {{htmlattrxref("autofocus", "select")}} 属性を反映した <code>true</code> または <code>false</code> の値を持ちます。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。</p>
+**`HTMLSelectElement.autofocus`** プロパティは、 HTML の {{htmlattrxref("autofocus", "select")}} 属性を反映した `true` または `false` の値を持ちます。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。
 
-<p>この属性を指定することができるのは、 1 つの文書内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素 (通常は該当する要素のうちページで最初のもの) が初期のフォーカスを得ます。</p>
+この属性を指定することができるのは、1 つの文書内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素 (通常は該当する要素のうちページで最初のもの) が初期のフォーカスを得ます。
 
-<div class="note">
-<p>このプロパティを設定しても、関連付けられた {{HTMLElement("select")}} 要素へフォーカスは設定されません。単純に文書へ <em>要素が挿入された</em> ときにブラウザーへフォーカスを移動するよう指示するだけです。挿入後に設定した場合、すなわち文書が読み込まれた後のほとんどの場合では、目に見える効果はありません。</p>
-</div>
+> **Note:** このプロパティを設定しても、関連付けられた {{HTMLElement("select")}} 要素へフォーカスは設定されません。単純に文書へ*要素が挿入された*ときにブラウザーへフォーカスを移動するよう指示するだけです。挿入後に設定した場合、すなわち文書が読み込まれた後のほとんどの場合では、目に見える効果はありません。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">aBool = aSelectElement.autofocus; // Get the value of autofocus
-aSelectElement.autofocus = aBool; // Set the value of autofocus
-</pre>
+```js
+aBool = aSelectElement.autofocus; // autofocus の値を取得
+aSelectElement.autofocus = aBool; // autofocus の値を設定
+```
 
-<h2 id="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;select id="mySelect" autofocus&gt;
-  &lt;option&gt;Option 1&lt;/option&gt;
-  &lt;option&gt;Option 2&lt;/option&gt;
-&lt;/select&gt;
-</pre>
+```html
+<select id="mySelect" autofocus>
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush:js">// Check if the autofocus attribute on the &lt;select&gt;
+```js
+// <select> に autofocus 属性があるかどうかをチェック
 var hasAutofocus = document.getElementById('mySelect').autofocus;
-</pre>
+```
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="col">仕様書</th>
-      <th scope="col">状態</th>
-      <th scope="col">備考</th>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', '#dom-fe-autofocus', 'autofocus')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.2',
-        'sec-forms.html#autofocusing-a-form-control-the-autofocus-attribute',
-        'autofocus')}}</td>
-      <td>{{Spec2('HTML5.2')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.HTMLSelectElement.autofocus")}}</p>
+{{Compat}}
diff --git a/files/ja/web/api/htmlselectelement/checkvalidity/index.md b/files/ja/web/api/htmlselectelement/checkvalidity/index.md
new file mode 100644
index 0000000000..cdfa2057c5
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/checkvalidity/index.md
@@ -0,0 +1,34 @@
+---
+title: HTMLSelectElement.checkValidity()
+slug: Web/API/HTMLSelectElement/checkValidity
+tags:
+  - API
+  - Constraint Validation API
+  - HTML DOM
+  - HTMLSelectElement
+  - メソッド
+  - リファレンス
+browser-compat: api.HTMLSelectElement.checkValidity
+translation_of: Web/API/HTMLSelectElement/checkValidity
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.checkValidity()`** メソッドは、その要素に制約が設定されているかどうか、それを満足しているかどうかをチェックします。その要素が制約を満たしていない場合、ブラウザーはキャンセル可能な {{domxref("HTMLSelectElement/invalid_event", "invalid")}} イベントをその要素に送り、`false` を返します。
+
+## 構文
+
+```js
+var result = selectElt.checkValidity();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [フォームの検証](/ja/docs/Web/Guide/HTML/Constraint_validation)
diff --git a/files/ja/web/api/htmlselectelement/disabled/index.md b/files/ja/web/api/htmlselectelement/disabled/index.md
new file mode 100644
index 0000000000..6c0b222256
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/disabled/index.md
@@ -0,0 +1,66 @@
+---
+title: HTMLSelectElement.disabled
+slug: Web/API/HTMLSelectElement/disabled
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - プロパティ
+browser-compat: api.HTMLSelectElement.disabled
+translation_of: Web/API/HTMLSelectElement/disabled
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.disabled`** は論理値で、HTML の [`disabled`](/ja/docs/Web/HTML/Element/select#attr-disabled) 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。
+
+## 構文
+
+```js
+aSelectElement.disabled = aBool;
+```
+
+<h2 id="Example">例</h2>
+
+### HTML
+
+```html
+<label>
+  飲み物はいかが？
+  <input id="allow-drinks" type="checkbox"/>
+</label>
+
+<label for="drink-select">飲み物の選択:</label>
+<select id="drink-select" disabled>
+  <option value="1">水</option>
+  <option value="2">ビール</option>
+  <option value="3">ペプシ</option>
+  <option value="4">ウィスキー</option>
+</select>
+```
+
+### 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
+<form action="http://www.google.com/search" method="get">
+ <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
+</form>
+```
+
+### Javascript
+
+すべてのフォーム要素で使用できるプロパティである "type" は、呼び出し元のフォーム要素の型を返します。SELECT の場合、選択リストの種類に応じて "`select-one`" または "`select-multiple`" の値を取ります。以下のコードは特定のフォーム内のすべての SELECT 要素に CSS の "`selectclass`" クラスを設定します。
+
+```html
+<script type="text/javascript">
+var form_element = document.getElementById('subscribe_form');
+var vist = form_element.style;
+if (vist.display=='' || vist.display=='none')
+{
+  vist.display = 'block';
+}
+else
+{
+  vist.display = 'none';
+}
+</script>
+```
+
+## 仕様書
+
+{{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
 ---
-<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;
+{{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<em>イベント名</em>` プロパティに代入するかしてください。
+
+- {{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 があると仮定します
+<select id='s'>
+    <option>First</option>
+    <option selected>Second</option>
+    <option>Third</option>
+</select>
 */
 
 var select = document.getElementById('s');
@@ -109,54 +107,18 @@ 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>
+```
+
+ユーザーの選択の変更を追跡するのであれば、 {{domxref("HTMLElement/change_event", "change")}} イベントが `<select>` に発生するのを監視するほうがより良い方法です。これは値が変化したときに通知され、必要なものを更新することができます。詳しくは、 `change` イベントのドキュメントで[提供されている例](/ja/docs/Web/API/HTMLElement/change_event#select_element)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このインターフェイスを実装している HTML 要素: {{HTMLElement("select")}}
diff --git a/files/ja/web/api/htmlselectelement/item/index.md b/files/ja/web/api/htmlselectelement/item/index.md
index 0513a73fe7..f081c5efa2 100644
--- a/files/ja/web/api/htmlselectelement/item/index.md
+++ b/files/ja/web/api/htmlselectelement/item/index.md
@@ -2,84 +2,63 @@
 title: HTMLSelectElement.item()
 slug: Web/API/HTMLSelectElement/item
 tags:
-- API
-- HTML DOM
-- HTMLSelectElement
-- Method
-- Reference
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - メソッド
+  - リファレンス
+browser-compat: api.HTMLSelectElement.item
 translation_of: Web/API/HTMLSelectElement/item
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p><code><strong>HTMLSelectElement.item()</strong></code> メソッドは、選択肢のリスト内で引数で渡された位置にある {{domxref("HTMLOptionElement")}} に対応する {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返します。</p>
+**`HTMLSelectElement.item()`** メソッドは、選択肢のリスト内で引数で渡された位置にある {{domxref("HTMLOptionElement")}} に対応する {{domxref("Element")}} を返します。存在しない場合は `null` を返します。
 
-<p>JavaScript では、ブラケット構文に <code>unsigned long</code> の値を入れた <code><em>selectElt</em>[<em>index</em>]</code> の形が、 <code><em>selectElt</em></code><code>.namedItem(<em>index</em>)</code> と同等です。</p>
+JavaScript では、ブラケット構文に `unsigned long` の値を入れた `selectElt[index]` の形が、`selectElt.namedItem(index)` と同等になります。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">var <em>item</em> = <em>collection</em>.item(<em>index</em>);
-var <em>item </em>=<em> collection</em>[<em>index</em>];
-</pre>
+```js
+var item = collection.item(index);
+var item = collection[index];
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<ul>
-  <li><code>index</code> は <code>unsigned long</code> の値です。</li>
-</ul>
+- `index` は `unsigned long` の値です。
 
-<h3 id="Return_value">返値</h3>
+### 返値
 
-<ul>
-  <li><code>item</code> は {{domxref("HTMLOptionElement")}} です。</li>
-</ul>
+- `item` は {{domxref("HTMLOptionElement")}} です。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;form&gt;
-  &lt;select id="myFormControl"&gt;
-    &lt;option id="o1"&gt;Opt 1&lt;/option&gt;
-    &lt;option id="o2"&gt;Opt 2&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <select id="myFormControl">
+    <option id="o1">Opt 1</option>
+    <option id="o2">Opt 2</option>
+  </select>
+</form>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush:css">// Returns the HTMLOptionElement representing #o2
+```css
+// Returns the HTMLOptionElement representing #o2
 elem1 = document.forms[0]['myFormControl'][1];
-</pre>
-
-<h2 id="Specifications">仕様書</h2>
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="col">仕様書</th>
-      <th scope="col">状態</th>
-      <th scope="col">備考</th>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', "#dom-select-item", "HTMLSelectElement.item()")}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>最新のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし。</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', "forms.html#dom-select-item",
-        "HTMLSelectElement.item()")}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td>初回定義、 {{SpecName('HTML WHATWG')}} のスナップショット。</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.HTMLSelectElement.item")}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>実装先の {{domxref("HTMLSelectElement")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{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")}} で、`<select>` 要素に関連付けられた `<label>` 要素が入ります。
+
+## 例
+
+### HTML
+
+```html
+<label id="label1" for="test">Label 1</label>
+<select id="test">
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+</select>
+<label id="label2" for="test">Label 2</label>
+```
+
+### 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
+<form>
+  <select id="myFormControl">
+    <option id="o1">Opt 1</option>
+    <option id="o2">Opt 2</option>
+  </select>
+</form>
+```
+
+### 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
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>HTMLSelectElement.options</strong></code> は読み取り専用のプロパティで、 {{HTMLElement("select")}} 要素に含まれる {{HTMLElement("option")}} 要素の {{domxref("HTMLOptionsCollection")}} を返します。</p>
+**`HTMLSelectElement.options`** は読み取り専用のプロパティで、{{domxref("HTMLOptionsCollection")}} で {{HTMLElement("select")}} 要素に含まれる {{HTMLElement("option")}} 要素を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>options</var> = <var>select</var>.options;
-</pre>
+```js
+var options = select.options;
+```
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+## 返値
 
-<p><code>&lt;select&gt;</code> 要素に含まれる <code>&lt;option&gt;</code> 要素の {{domxref("HTMLOptionsCollection")}} です。</p>
+{{domxref("HTMLOptionsCollection")}} で、`<select>` 要素に含まれる `<option>` 要素を返します。
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;label for="test"&gt;Label&lt;/label&gt;
-&lt;select id="test"&gt;
-  &lt;option value="1"&gt;Option 1&lt;/option&gt;
-  &lt;option value="2"&gt;Option 2&lt;/option&gt;
-&lt;/select&gt;
-</pre>
+```html
+<label for="test">ラベル</label>
+<select id="test">
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+</select>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+```js
+window.addEventListener("DOMContentLoaded", function() {
   const select = document.getElementById("test");
-  for(var i = 0; i &lt; 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"
   }
-});</pre>
+});
+```
 
-<p>{{EmbedLiveSample("Example", "100%", 30)}}</p>
+{{EmbedLiveSample("Example", "100%", 30)}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## Specifications
 
-<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", "form-elements.html#the-select-element:htmloptionscollection", "options")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "forms.html#htmlselectelement", "options")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## Browser compatibility
 
-<p>{{Compat("api.HTMLSelectElement.options")}}</p>
+{{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 オブジェクトが既にあるとします。
+
+  <select id="existingList" name="existingList">
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+    <option value="3">Option: Value 3</option>
+  </select>
+
+  以下のように変化します。
+
+  <select id="existingList" name="existingList">
+    <option value="1">Option: Value 1</option>
+    <option value="3">Option: Value 3</option>
+  </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;
+```
+
+<h2 id="Example">例</h2>
+
+### HTML
+
+```html
+<p id="p">selectedIndex: 0</p>
+
+<select id="select">
+  <option selected>Option A</option>
+  <option>Option B</option>
+  <option>Option C</option>
+  <option>Option D</option>
+  <option>Option E</option>
+</select>
+```
+
+### JavaScript
+
+```js
+var selectElem = document.getElementById('select')
+var pElem = document.getElementById('p')
+
+// When a new <option> is selected
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Add that data to the <p>
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})
+```
+
+{{EmbedLiveSample("Example", "200px", "80px")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlselectelement/selectedoptions/index.md b/files/ja/web/api/htmlselectelement/selectedoptions/index.md
new file mode 100644
index 0000000000..2c928b63e2
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/selectedoptions/index.md
@@ -0,0 +1,118 @@
+---
+title: HTMLSelectElement.selectedOptions
+slug: Web/API/HTMLSelectElement/selectedOptions
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - Options
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+  - Select
+  - ウェブ
+  - selectedOptions
+browser-compat: api.HTMLSelectElement.selectedOptions
+---
+{{APIRef("HTML DOM")}}
+
+**読み取り専用**の {{domxref("HTMLSelectElement")}} の **`selectedOptions`** プロパティは、この {{HTMLElement("select")}} 要素にある現在選択中の　{{HTMLElement("option")}} のリストが入ります。選択中の選択肢のリストは {{domxref("HTMLCollection")}} オブジェクトで、現在選択中の選択肢ごとに 1 項目ずつ入ります。
+
+選択肢は {{domxref("HTMLOptionElement.selected")}} 属性を持つ場合に選択されたとみなされます。
+
+## 構文
+
+```js
+var selectedCollection = HTMLSelectElement.selectedOptions;
+```
+
+### 値
+
+{{domxref("HTMLCollection")}} で、{{domxref("HTMLSelectElement")}} または `<select>` 内にある {{domxref("HTMLOptGroupElement")}} の子である現在選択中の {{domxref("HTMLOptionElement")}} すべてが入ります。
+
+つまり、`<select>` 要素に含まれる選択肢はすべて結果に含まれますが、選択肢グループはリストに含まれません。
+
+現在選択中の選択肢がない場合は、コレクションは空になり、{{domxref("HTMLCollection.length", "length")}} は 0 になります。
+
+<h2 id="Example">例</h2>
+
+この例では、いくつかの選択肢を持つ {{HTMLElement("select")}} 要素を使用し、ユーザーがさまざまな食べ物を注文できるようにしています。
+
+### HTML
+
+選択ボックスと、それぞれの食べ物の選択肢を表す {{HTMLElement("option")}} 要素を生成する HTML は次のようになります。
+
+```html
+<label for="foods">何を召し上がりますか？</label><br>
+<select id="foods" name="foods" size="7" multiple>
+  <option value="1">ブリトー</option>
+  <option value="2">チーズバーガー</option>
+  <option value="3">特上ダブルベーコンバーガー</option>
+  <option value="4">ペパロニピザ</option>
+  <option value="5">タコス</option>
+</select>
+<br>
+<button name="order" id="order">
+  注文する
+</button>
+<p id="output">
+</p>
+```
+
+`<select>` 要素は、複数の項目を選択できるように設定されており、7 行の高さになっています。また、{{HTMLElement("button")}} は、`selected` プロパティを使用して、選択された要素の {{domxref("HTMLCollection")}} を取得するトリガーとなる役割を担っています。
+
+### JavaScript
+
+ボタンのイベントハンドラーを確立する JavaScript のコードと、イベントハンドラー自体は次のようになっています。
+
+```js
+let orderButton = document.getElementById("order");
+let itemList = document.getElementById("foods");
+let outputBox = document.getElementById("output");
+
+orderButton.addEventListener("click", function() {
+  let collection = itemList.selectedOptions;
+  let output = "";
+
+  for (let i=0; i<collection.length; i++) {
+    if (output === "") {
+      output = "Your order for the following items has been placed: ";
+    }
+    output += collection[i].label;
+
+    if (i === (collection.length - 2) && (collection.length < 3)) {
+      output +=  " and ";
+    } else if (i < (collection.length - 2)) {
+      output += ", ";
+    } else if (i === (collection.length - 2)) {
+      output += ", and ";
+    }
+  }
+
+  if (output === "") {
+    output = "You didn't order anything!";
+  }
+
+  outputBox.innerHTML = output;
+}, false);
+```
+
+このスクリプトは、「注文する」ボタンの {{domxref("Element/click_event", "click")}} イベントリスナーを設定します。クリックされると、イベントハンドラーは `selectedOptions` を使って選択された選択肢のリストを取得し、リスト内の選択肢を繰り返し処理します。順番に並べられた項目を列挙するために文字列が作成され、適切な英語の文法ルール ({{interwiki("wikipedia", "en:serial comma")}} を含む) を使ってリストを作成するロジックがあります。
+
+### 結果
+
+出来上がったコンテンツを実際に見てみると、こんな感じです。
+
+{{EmbedLiveSample("Example", 600, 250)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{SectionOnPage("/ja/docs/Learn/Forms/Other_form_controls", "Drop-down controls")}}
diff --git a/files/ja/web/api/htmlselectelement/setcustomvalidity/index.md b/files/ja/web/api/htmlselectelement/setcustomvalidity/index.md
new file mode 100644
index 0000000000..52ea4728bd
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/setcustomvalidity/index.md
@@ -0,0 +1,38 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+tags:
+  - API
+  - Constrain Validation API
+  - HTML DOM
+  - HTMLSelectElement
+  - メソッド
+  - リファレンス
+browser-compat: api.HTMLSelectElement.setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.setCustomValidity()`** メソッドは、選択要素のカスタム検証メッセージを指定されたメッセージに設定します。要素にカスタム検証エラーが*ない*ことを示す場合は、空の文字列を使用します。
+
+## 構文
+
+```js
+selectElt.setCustomValidity(string);
+```
+
+### 引数
+
+- `string` で、エラーメッセージを含む {{domxref("DOMString")}} です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [フォームの検証](/ja/docs/Web/Guide/HTML/Constraint_validation)
diff --git a/files/ja/web/api/htmlselectelement/type/index.md b/files/ja/web/api/htmlselectelement/type/index.md
new file mode 100644
index 0000000000..ae2163bcd7
--- /dev/null
+++ b/files/ja/web/api/htmlselectelement/type/index.md
@@ -0,0 +1,54 @@
+---
+title: HTMLSelectElement.type
+slug: Web/API/HTMLSelectElement/type
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+browser-compat: api.HTMLSelectElement.type
+translation_of: Web/API/HTMLSelectElement/type
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLSelectElement.type`** は読み取り専用のプロパティで、フォームコントロールの `type` を返します。
+
+## 構文
+
+```js
+var str = selectElt.type;
+```
+
+取りうる値は次の通りです。
+
+- `"select-multiple"` 複数の値が選択可能な場合
+- `"select-one"` 一つの値だけが選択可能な場合
+
+## 例
+
+```js
+switch (select.type) {
+  case 'select-multiple':
+    // 複数の値が選択可能
+    break;
+  case 'select-one':
+    // 一つの値だけが選択可能
+    break;
+  default:
+    // 標準外の値 (または SELECT 要素ではない)
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このインターフェイスを実装している HTML の {{HTMLElement("select")}} 要素。