JavaScriptでのフォーム部品（オプション部品；select, options, defaultSelected, selected, text, value, length）
目次:
- フォーム部品（select要素）の概要
- optionsプロパティ
- 特定のオプションを取得: options[n]
- options.length
- defaultSelectedプロパティ
- selectedプロパティ
- textプロパティ
- valueプロパティ
フォーム部品（select要素）の概要
HTMLのフォームで使用する
<form name="exampleForm">
<select name="exampleSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
optionsプロパティ
window.document.form.select.optionsは、
let select = document.forms['exampleForm'].elements['exampleSelect'];
console.log(select.options); // 全オプションを取得
新しいオプションを追加する例:
let newOption = new Option("Option 4", "4");
select.options.add(newOption); // Option 4を追加
特定のオプションを取得: options[n]
options[n]を使用すると、特定のインデックスにある
let firstOption = select.options[0];
console.log(firstOption.text); // "Option 1"
options.length
options.lengthは、現在の
console.log(select.options.length); // オプションの数を取得
例: 最後のオプションを削除する
select.options.remove(select.options.length - 1); // 最後のオプションを削除
defaultSelectedプロパティ
defaultSelectedプロパティは、HTMLで指定されたデフォルトの選択状態を示します。
let firstOption = select.options[0];
console.log(firstOption.defaultSelected); // true または false
selectedプロパティ
selectedプロパティは、現在選択されているかどうかを示します。このプロパティを変更すると選択状態も変わります。
let secondOption = select.options[1];
secondOption.selected = true; // Option 2を選択
textプロパティ
textプロパティは、オプション要素の表示テキストを取得または変更します。
let firstOption = select.options[0];
console.log(firstOption.text); // "Option 1"
firstOption.text = "Updated Option 1"; // テキストを変更
valueプロパティ
valueプロパティは、オプション要素の値を取得または変更します。
let firstOption = select.options[0];
console.log(firstOption.value); // "1"
firstOption.value = "10"; // 値を変更