概要: このチュートリアルでは、JavaScript で <select> 要素を扱う方法を学びます。
HTML セレクト要素の紹介
<select> 要素は、オプションのリストを提供します。 <select> 要素を使用すると、1つまたは複数のオプションを選択できます。
<select> 要素を作成するには、<select> および <option> 要素を使用します。例:
<select id="framework">
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>Code language: HTML, XML (xml)上記の <select> 要素では、一度に1つのオプションを選択できます。
複数選択を有効にするには、次のように multiple 属性を <select> 要素に追加します。
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>Code language: HTML, XML (xml)HTMLSelectElement 型
JavaScript で <select> 要素を操作するには、HTMLSelectElement 型を使用します。
HTMLSelectElement 型には、次の便利なプロパティがあります。
selectedIndex– 選択されたオプションのゼロベースのインデックスを返します。オプションが選択されていない場合、selectedIndexは-1です。<select>要素で複数選択が許可されている場合、selectedIndexは最初のオプションのvalueを返します。value– 選択された最初のオプション要素がある場合は、そのvalueプロパティを返します。それ以外の場合は、空の文字列を返します。multiple–<select>要素で複数選択が許可されている場合はtrueを返します。これはmultiple属性と同等です。
selectedIndex プロパティ
<select> 要素を選択するには、getElementById() や querySelector() などの DOM API を使用します。
次の例は、選択されたオプションのインデックスを取得する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Select Element Demo</title>
<link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
<form>
<label for="framework">Select a JS Framework</label>
<select id="framework">
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
<button id="btn">Get the Selected Index</button>
</form>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework')
btn.onclick = (event) => {
event.preventDefault();
// show the selected index
alert(sb.selectedIndex);
};
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み
- まず、
querySelector()メソッドを使用して<button>および<select>要素を選択します。 - 次に、ボタンにクリックイベントリスナーをアタッチし、ボタンがクリックされたときに
alert()メソッドを使用して選択されたインデックスを表示します。
value プロパティ
<select> 要素の value プロパティは、<option> 要素とその HTML multiple 属性によって異なります。
- オプションが選択されていない場合、セレクトボックスの
valueプロパティは空の文字列になります。 - オプションが選択され、
value属性がある場合、セレクトボックスのvalueプロパティは、選択されたオプションの値になります。 - オプションが選択され、
value属性がない場合、セレクトボックスのvalueプロパティは、選択されたオプションのテキストになります。 - 複数のオプションが選択されている場合、セレクトボックスの
valueプロパティは、前の2つのルールに基づいて最初に選択されたオプションから派生します。
次の例を参照してください。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form>
<label for="framework">Select a JS Framework:</label>
<select id="framework">
<option value="">Angular</option>
<option value="1">React</option>
<option value="2">Vue.js</option>
<option>Ember.js</option>
</select>
<button id="btn">Get the Selected Value</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework')
btn.onclick = (event) => {
event.preventDefault();
alert(sb.value);
};
</script>
</body>
</html>Code language: HTML, XML (xml)この例では
- 最初のオプションを選択した場合、
<select>のvalueプロパティは空になります。 - 最後のオプションを選択した場合、選択されたオプションに
value属性がないため、セレクトボックスのvalueプロパティはEmber.jsになります。 - 2番目または3番目のオプションを選択した場合、value プロパティは
"1"または"2"になります。
HTMLOptionElement 型
JavaScript では、HTMLOptionElement 型は <option> 要素を表します。
HTMLOptionElement 型には、次の便利なプロパティがあります。
index– オプションのコレクション内のオプションのインデックス。selected– オプションが選択されている場合はtrueを返します。このプロパティをtrueに設定すると、オプションが選択されます。text– オプションのテキストを返します。value– HTML value 属性を返します。
<select> 要素には、オプションのコレクションにアクセスできる options プロパティがあります。
selectBox.optionsCode language: CSS (css)たとえば、2番目のオプションの text と value にアクセスするには、次のように使用します。
const text = selectBox.options[1].text;
const value = selectBox.options[1].value;Code language: JavaScript (javascript)単一選択の <select> 要素の選択されたオプションを取得するには、次のコードを使用します。
let selectedOption = selectBox.options[selectBox.selectedIndex];Code language: JavaScript (javascript)次に、text プロパティと value プロパティを介して、選択したオプションの text と value にアクセスできます。
const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;Code language: JavaScript (javascript)<select> 要素で複数選択が許可されている場合は、selected プロパティを使用して、どのオプションが選択されているかを判断できます。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Select Box</title>
<link rel="stylesheet" href="css/selectbox.css">
</head>
<body>
<div id="container">
<form>
<label for="framework">Select one or more JS Frameworks:</label>
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
<button id="btn">Get Selected Frameworks</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework');
btn.onclick = (e) => {
e.preventDefault();
const selectedValues = [].filter
.call(sb.options, option => option.selected)
.map(option => option.text);
alert(selectedValues);
};
</script>
</body>
</html>Code language: HTML, XML (xml)この例では、sb.options は配列のようなオブジェクトであるため、filter() メソッドのような Array オブジェクトはありません。
Array オブジェクトからこれらのメソッドを借用するには、call() メソッドを使用します。たとえば、次は選択したオプションの配列を返します。
[].filter.call(sb.options, option => option.selected)Code language: PHP (php)また、オプションの text プロパティを取得するには、次のように、filter() メソッドの結果を map() メソッドにチェーンします。
.map(option => option.text);Code language: JavaScript (javascript)まとめ
<select>要素を使用すると、1つまたは複数のオプションを選択できます。複数選択を有効にするには、multiple属性を<select>要素に追加します。HTMLSelectElementは<select>要素を表します。selectedIndexおよびvalueを使用して、選択したオプションのインデックスと値を取得します。HTMLOptionElementは<option>要素を表します。オプションが選択されている場合、selectedプロパティは true です。selectedTextおよびselectedValueプロパティは、選択したオプションのtextおよびvalueを返します。
