Skip to content

Commit

Permalink
2023/04/07 時点の英語版に同期
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Jul 9, 2023
1 parent 9c5b3e3 commit c2d3522
Show file tree
Hide file tree
Showing 13 changed files with 217 additions and 171 deletions.
40 changes: 23 additions & 17 deletions files/ja/web/api/htmlselectelement/add/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
title: HTMLSelectElement.add()
title: "HTMLSelectElement: add() メソッド"
short-title: add()
slug: Web/API/HTMLSelectElement/add
l10n:
sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---

{{APIRef("HTML DOM")}}
Expand All @@ -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")}})。

### 例外

Expand All @@ -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";
Expand All @@ -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";

Expand All @@ -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";

Expand Down
18 changes: 9 additions & 9 deletions files/ja/web/api/htmlselectelement/autofocus/index.md
Original file line number Diff line number Diff line change
@@ -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 の値を設定
```
論理値です。

##

Expand All @@ -33,7 +33,7 @@ aSelectElement.autofocus = aBool; // autofocus の値を設定

```js
// <select> に autofocus 属性があるかどうかをチェック
var hasAutofocus = document.getElementById('mySelect').autofocus;
const hasAutofocus = document.getElementById("mySelect").autofocus;
```

## 仕様書
Expand Down
17 changes: 14 additions & 3 deletions files/ja/web/api/htmlselectelement/checkvalidity/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
title: HTMLSelectElement.checkValidity()
title: "HTMLSelectElement: checkValidity() メソッド"
short-title: checkValidity()
slug: Web/API/HTMLSelectElement/checkValidity
l10n:
sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---

{{ APIRef("HTML DOM") }}
Expand All @@ -9,10 +12,18 @@ slug: Web/API/HTMLSelectElement/checkValidity

## 構文

```js
var result = selectElt.checkValidity();
```js-nolint
checkValidity()
```

### 引数

なし。

### 返値

なし({{jsxref("undefined")}})。

## 仕様書

{{Specifications}}
Expand Down
39 changes: 20 additions & 19 deletions files/ja/web/api/htmlselectelement/disabled/index.md
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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')}}

## 仕様書

Expand Down
49 changes: 25 additions & 24 deletions files/ja/web/api/htmlselectelement/form/index.md
Original file line number Diff line number Diff line change
@@ -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>
```

Expand Down
17 changes: 10 additions & 7 deletions files/ja/web/api/htmlselectelement/item/index.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
---
title: HTMLSelectElement.item()
title: "HTMLSelectElement: item() メソッド"
short-title: item()
slug: Web/API/HTMLSelectElement/item
l10n:
sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---

{{ APIRef("HTML DOM") }}

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

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

## 構文

```js
var item = collection.item(index);
var item = collection[index];
```js-nolint
item(index)
// or collection[index]
```

### 引数
Expand All @@ -39,9 +42,9 @@ var item = collection[index];

### JavaScript

```css
```js
// Returns the HTMLOptionElement representing #o2
elem1 = document.forms[0]['myFormControl'][1];
elem1 = document.forms[0]["myFormControl"][1];
```

## 仕様書
Expand Down
Loading

0 comments on commit c2d3522

Please sign in to comment.