ドロップダウンメニューの値をJavaScriptを使って取得・設定する
フォームで利用可能なドロップダウンメニューで選択された値を JavaScript から取得したり設定したりする方法について解説します。ドロップダウンメニューはクリックすると展開されるメニューで、表示された複数の項目の中から一つまたは複数の項目を選択することができます。ドロップダウンメニューを表示するには seletct 要素の中に option 要素を項目の数だけ追加します。
(Last modified: )
HTMLでドロップダウンメニューを作成する
HTML でドロップダウンメニューを表示するには select 要素の中に表示する選択肢の数だけ option 要素を追加します。
<select> <option>Orange</option> <option>Lemon</option> <option>Strawberry</option> </select>
ドロップダウンメニューの前にラベルを表示する場合は label 要素と組み合わせます。
<label for="fruit">選択してください</label>
<select id="fruit">
<option>Orange</option>
<option>Lemon</option>
<option>Strawberry</option>
</select>
どの選択肢が選択されたのかをあとで取得するために、それぞれの選択肢の value 属性に異なる値を設定してください。
<label for="fruit">選択してください</label> <select id="fruit"> <option value="orange">Orange</option> <option value="lemon">Lemon</option> <option value="strawberry">Strawberry</option> </select>
最初に選択されている選択肢を指定するには、対象の選択肢に selected 属性を設定します。
<label for="fruit">選択してください</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon" selected>Lemon</option>
<option value="strawberry">Strawberry</option>
</select>
複数の項目を同時に選択できるようにするには、 select 要素に対して multiple 属性を設定してください。
<label for="fruit">選択してください</label>
<select id="fruit" multiple>
<option value="orange">Orange</option>
<option value="lemon" selected>Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
</select>
なお multiple 属性を設定した場合はドロップダウンメニューではなく、選択肢が最初から表示されているセレクトメニューとなります。
multiple 属性が設定されている場合、いくつの選択肢を画面に一度に表示するのかを size 属性で指定することができます。
<label for="fruit">選択してください</label>
<select id="fruit" multiple size="3">
<option value="orange">Orange</option>
<option value="lemon" selected>Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
</select>
ドロップダウンメニューの値の取得と設定
ドロップダウンメニューの中で選択されている選択肢の値を取得するには select 要素を表す HTMLSelectElement オブジェクトの value プロパティの値を参照します。書式は次のとおりです。
element.value
value プロパティの値は現在選択されている選択肢の value プロパティに設定されている値です。
実際には次のように記述します。
let element = document.getElementById('myselect');
console.log(element.value);
選択肢の中のいずれかを選択するには、 HTMLSelectElement オブジェクトを取得したあと options プロパティを参照して select 要素に含まれる option の一覧を取得します。そのあとでインデックスを指定して selected プロパティに対して true を設定してください。
let element = document.getElementById('myselect');
let options = element.options;
options[1].selected = true;
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>サンプルページです。</p>
<label for="fruit">選択してください</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
</select>
<div>
<input type="button" value="Check" id="checkButton">
</div>
<script>
function butotnClick(){
console.log('選択されているのは ' + fruitSelect.value + ' です');
}
let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html>
選択肢が 3 つあるドロップダウンメニューを画面に表示しています。最後の選択肢の selected プロパティに true を設定してデフォルトで選択しています。
メニューをクリックして選択肢を表示したあと、いずれかの選択肢を選択したあとでボタンをクリックすると、現在選択しているメニューの値を取得してコンソールに出力します。
複数選択可能なセレクトメニューでの値の取得
select 要素に対して multiple 属性を設定すると複数の選択肢を同時に選択することができます。
<label for="fruit">選択してください</label> <select id="fruit" multiple> <option value="orange">Orange</option> <option value="lemon">Lemon</option> <option value="strawberry">Strawberry</option> <option value="banana">banana</option> <option value="apple">apple</option> </select>
選択されている選択肢の一覧を取得するには HTMLSelectElement オブジェクトを取得したあと selectedOptions プロパティを参照します。書式は次のとおりです。
element.selectedOptions
選択されている選択肢の一覧を取得したら、インデックスを指定して順番に option 要素を取得します。そして value プロパティまたは label プロパティを参照して値を取り出します。
let element = document.getElementById('myselect');
let selectOptions = element.selectedOptions;
for (let i = 0 ; i > selectOptions.length ; i++){
console.log(selectOptions[i].value);
}
value プロパティでは option 要素に設定されている value 属性の値を取得し、 label プロパティでは option 要素で記述されているラベル名(<option>と</option>の間のテキスト)を取得します。
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>サンプルページです。</p>
<label for="fruit">選択してください</label>
<select id="fruit" multiple size="5">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
</select>
<div>
<input type="button" value="Check" id="checkButton">
</div>
<script>
function butotnClick(){
let selectOptions = fruitSelect.selectedOptions;
console.log('現在選択している項目は');
for (let i = 0 ; i < selectOptions.length ; i++){
console.log(selectOptions[i].value);
}
console.log('です。');
}
let fruitSelect = document.getElementById('fruit');
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html>
複数の選択肢を一度に選択可能なセレクトメニューを表示しています。選択肢を選択した上でボタンをクリックすると、選択されているすべての選択肢の値をコンソールに出力します。
ドロップダウンメニューのイベント処理
ドロップダウンメニューでは新しく選択を行うと select 要素で change イベントが発生します。
change イベントを利用する場合は次のように記述します。
<select id="fruit">
・・・
</select>
<script>
function valueChange(){
// イベントが発生した時の処理
}
let element = document.getElementById('fruit');
element.addEventListener('change', valueChange);
</script>
change イベントの詳しい使い方については「changeイベント：フォームや選択メニューが変更されたとき」を参照されてください。
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>サンプルページです。</p>
<label for="fruit">選択してください</label>
<select id="fruit">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
</select>
<script>
function valueChange(){
console.log('新しく ' + fruitSelect.value + ' を選択しました');
}
let fruitSelect = document.getElementById('fruit');
fruitSelect.options[2].selected = true;
fruitSelect.addEventListener('change', valueChange);
</script>
</body>
</html>
新しい選択肢を選択するとコンソールに選択した選択肢の値が出力されます。
なお select 要素に multiple 属性を設定した場合も同じコードでイベント処理を行うことができます。
-- --
フォームで利用可能なドロップダウンメニューの値を JavaScript から取得したり設定したりする方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。