mdn · mfuji09 · Jul 13, 2023 · Jul 8, 2023 · Jul 8, 2023 · Jul 8, 2023
@@ -1,6 +1,9 @@
 ---
-title: HTMLSelectElement.add()
+title: "HTMLSelectElement: add() メソッド"
+short-title: add()
 slug: Web/API/HTMLSelectElement/add
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
 ---
 
 {{APIRef("HTML DOM")}}
@@ -9,15 +12,22 @@ slug: Web/API/HTMLSelectElement/add
 
 ## 構文
 
-```js
-collection.add(item[, before]);
+```js-nolint
+add(item)
+add(item, before)
 ```
 
 ### 引数
 
-- _item_ は {{domxref("HTMLOptionElement")}} または
-  {{domxref("HTMLOptGroupElement")}} です
-- _before_ は省略可能で、集合内の要素または _long_ 型の位置を指定し、_item_ を挿入する直後のい位置を表します。この引数が `null` (または存在しない位置) であった場合、新しい要素は集合の末尾に追加されます。
+- `item`
+  - : {{domxref("HTMLOptionElement")}} または
+    {{domxref("HTMLOptGroupElement")}} です
+- `before` {{optional_inline}}
+  - : 集合内の要素または _long_ 型で位置を指定します。_item_ はその直前に挿入されます。この引数が `null`（または存在しない位置）であった場合、新しい要素は集合の末尾に追加されます。
+
+### 返値
+
+なし（{{jsxref("undefined")}}）。
 
 ### 例外
 
@@ -29,9 +39,9 @@ collection.add(item[, before]);
 ### 一から要素を作成
 
 ```js
-var sel = document.createElement("select");
-var opt1 = document.createElement("option");
-var opt2 = document.createElement("option");
+const sel = document.createElement("select");
+const opt1 = document.createElement("option");
+const opt2 = document.createElement("option");
 
 opt1.value = "1";
 opt1.text = "Option: Value 1";
@@ -55,18 +65,16 @@ sel.add(opt2, null);
 before 引数は省略可能ですので、以下のようにすることもできます。
 
 ```js
-...
 sel.add(opt1);
 sel.add(opt2);
-...
 ```
 
 ### 既存の集合に追加
 
 ```js
-var sel = document.getElementById("existingList");
+const sel = document.getElementById("existingList");
 
-var opt = document.createElement("option");
+const opt = document.createElement("option");
 opt.value = "3";
 opt.text = "Option: Value 3";
 
@@ -93,17 +101,15 @@ sel.add(opt, null);
 before 引数は省略可能ですので、以下のようにすることもできます。
 
 ```js
-...
 sel.add(opt);
-...
 ```
 
 ### 既存の集合への挿入
 
 ```js
-var sel = document.getElementById("existingList");
+const sel = document.getElementById("existingList");
 
-var opt = document.createElement("option");
+const opt = document.createElement("option");
 opt.value = "3";
 opt.text = "Option: Value 3";
 

@@ -1,22 +1,22 @@
 ---
-title: HTMLSelectElement.autofocus
+title: "HTMLSelectElement: autofocus プロパティ"
+short-title: autofocus
 slug: Web/API/HTMLSelectElement/autofocus
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
 ---
 
 {{ APIRef("HTML DOM") }}
 
-**`HTMLSelectElement.autofocus`** プロパティは、 HTML の [`autofocus`](/ja/docs/Web/HTML/Element/select#autofocus) 属性を反映した `true` または `false` の値を持ちます。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。
+**`HTMLSelectElement.autofocus`** プロパティは、HTML の [`autofocus`](/ja/docs/Web/HTML/Element/select#autofocus) 属性を反映した `true` または `false` の値を持ちます。これはユーザーが上書きしない限り、ページが読み込まれた際に関連付けられた {{HTMLElement("select")}} 要素がページ読み込み時に入力フォーカスを得るかどうかを示します。
 
-この属性を指定することができるのは、1 つの文書内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素 (通常は該当する要素のうちページで最初のもの) が初期のフォーカスを得ます。
+この属性を指定することができるのは、1 つの文書内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素（通常は該当する要素のうちページで最初のもの）が初期のフォーカスを得ます。
 
 > **メモ:** このプロパティを設定しても、関連付けられた {{HTMLElement("select")}} 要素へフォーカスは設定されません。単純に文書へ*要素が挿入された*ときにブラウザーへフォーカスを移動するよう指示するだけです。挿入後に設定した場合、すなわち文書が読み込まれた後のほとんどの場合では、目に見える効果はありません。
 
-## 構文
+## 値
 
-```js
-aBool = aSelectElement.autofocus; // autofocus の値を取得
-aSelectElement.autofocus = aBool; // autofocus の値を設定
-```
+論理値です。
 
 ## 例
 
@@ -33,7 +33,7 @@ aSelectElement.autofocus = aBool; // autofocus の値を設定
 
 ```js
 // <select> に autofocus 属性があるかどうかをチェック
-var hasAutofocus = document.getElementById('mySelect').autofocus;
+const hasAutofocus = document.getElementById("mySelect").autofocus;
 ```
 
 ## 仕様書

@@ -1,6 +1,9 @@
 ---
-title: HTMLSelectElement.checkValidity()
+title: "HTMLSelectElement: checkValidity() メソッド"
+short-title: checkValidity()
 slug: Web/API/HTMLSelectElement/checkValidity
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
 ---
 
 {{ APIRef("HTML DOM") }}
@@ -9,10 +12,18 @@ slug: Web/API/HTMLSelectElement/checkValidity
 
 ## 構文
 
-```js
-var result = selectElt.checkValidity();
+```js-nolint
+checkValidity()
 ```
 
+### 引数
+
+なし。
+
+### 返値
+
+なし（{{jsxref("undefined")}}）。
+
 ## 仕様書
 
 {{Specifications}}

@@ -1,26 +1,27 @@
 ---
-title: HTMLSelectElement.disabled
+title: "HTMLSelectElement: disabled プロパティ"
+short-title: disabled
 slug: Web/API/HTMLSelectElement/disabled
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
 ---
 
 {{ APIRef("HTML DOM") }}
 
-**`HTMLSelectElement.disabled`** は論理値で、HTML の [`disabled`](/ja/docs/Web/HTML/Element/select#attr-disabled) 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。
+**`HTMLSelectElement.disabled`** プロパティは論理値で、HTML の [`disabled`](/ja/docs/Web/HTML/Element/select#disabled) 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。
 
-## 構文
+## 値
 
-```js
-aSelectElement.disabled = aBool;
-```
+論理値です。
 
-<h2 id="Example">例</h2>
+## 例
 
 ### HTML
 
 ```html
 <label>
   飲み物はいかが？
-  <input id="allow-drinks" type="checkbox"/>
+  <input id="allow-drinks" type="checkbox" />
 </label>
 
 <label for="drink-select">飲み物の選択:</label>
@@ -35,21 +36,21 @@ aSelectElement.disabled = aBool;
 ### 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);
+const allowDrinksCheckbox = document.getElementById("allow-drinks");
+const drinkSelect = document.getElementById("drink-select");
+
+allowDrinksCheckbox.addEventListener(
+  "change",
+  (event) => {
+    drinkSelect.disabled = !event.target.checked;
+  },
+  false
+);
 ```
 
 ### 結果
 
-{{EmbedLiveSample('Example')}}
+{{EmbedLiveSample('Examples')}}
 
 ## 仕様書
 

@@ -1,44 +1,45 @@
 ---
-title: HTMLSelectElement.form
+title: "HTMLSelectElement: form プロパティ"
+short-title: form
 slug: Web/API/HTMLSelectElement/form
+l10n:
+  sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
 ---
 
 {{ APIRef("HTML DOM") }}
 
 **`HTMLSelectElement.form`** は読み取り専用のプロパティで、この要素が関連付けられているフォームを表す {{domxref("HTMLFormElement")}} を返します。この要素が {{HTMLElement("form")}} 要素に関連付けられていなかった場合は、`null` を返します。
 
-## 構文
+## 値
 
-```js
-aForm = aSelectElement.form.selectname;
-```
+{{domxref("HTMLFormElement")}} です。
 
 ## 例
 
-### 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 id="pet-form">
+  <label for="pet-select">ペットを選択してください</label>
+  <select name="pets" id="pet-select">
+    <option value="dog">犬</option>
+    <option value="cat">猫</option>
+    <option value="parrot">オウム</option>
+  </select>
+
+  <button type="submit">送信</button>
 </form>
-```
 
-### Javascript
+<label for="lunch-select">ランチを選んでください</label>
+<select name="lunch" id="lunch-select">
+  <option value="salad">サラダ</option>
+  <option value="sandwich">サンドウィッチ</option>
+</select>
 
-すべてのフォーム要素で使用できるプロパティである "type" は、呼び出し元のフォーム要素の型を返します。SELECT の場合、選択リストの種類に応じて "`select-one`" または "`select-multiple`" の値を取ります。以下のコードは特定のフォーム内のすべての SELECT 要素に CSS の "`selectclass`" クラスを設定します。
+<script>
+  const petSelect = document.getElementById("pet-select");
+  const petForm = petSelect.form; // <form id="pet-form">
 
-```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';
-}
+  const lunchSelect = document.getElementById("lunch-select");
+  const lunchForm = lunchSelect.form; // null
 </script>
 ```