JavaScriptで複数選択リストボックスの値を取得・設定する方法について解説します。
複数選択リストボックスを操作する方法を教えてくれますか？
複数選択リストボックスから値を取得・設定する方法について説明します。
複数選択リストボックスの値を取得する方法
複数選択リストボックスから値を取得するには、以下のような方法があります。
選択された項目を一つずつ取得する方法
複数選択リストボックスから選択された項目を一つずつ取得するには、forループを使うのが一般的です。
forループ内で、selectedプロパティがtrueの項目のvalueプロパティを取得することで、選択された項目を取得することができます。
以下は、複数選択リストボックスから選択された項目を一つずつ取得する方法のサンプルプログラムです。
<select multiple id="mySelect">
<option value="value1">項目1</option>
<option value="value2">項目2</option>
<option value="value3">項目3</option>
<option value="value4">項目4</option>
</select>
<script>
const select = document.querySelector("#mySelect");
const options = select.options;
for (let i = 0; i < options.length; i++) {
if (options[i].selected) {
console.log(options[i].value);
}
}
</script>選択されたすべての項目を取得する方法
複数選択リストボックスから選択されたすべての項目を取得するには、querySelectorAllメソッドを使うことができます。
querySelectorAllメソッドにて、「:checked」セレクタを指定することで、選択されたすべての項目を取得することができます。
以下は、複数選択リストボックスから選択されたすべての項目を取得する方法のサンプルプログラムです。
<select multiple id="mySelect">
<option value="value1">項目1</option>
<option value="value2">項目2</option>
<option value="value3">項目3</option>
<option value="value4">項目4</option>
</select>
<script>
const selectedOptions = document.querySelectorAll("#mySelect option:checked");
for (const option of selectedOptions) {
console.log(option.value);
}
</script>複数選択リストボックスの値の設定方法
複数選択リストボックスの値の設定するには、HTML DOMの「selected」プロパティを利用する方法と、JavaScriptの「for」文を利用する方法があります。
「selected」プロパティを利用する方法では、以下のように記述します。
document.getElementById("リストボックスのID").options[インデックス番号].selected = true;この方法では、「options」オブジェクトを通じて「selected」プロパティを設定することで、選択状態になります。
JavaScriptの「for」文を利用する方法では、以下のように記述します。
for (var i = 0; i < リストボックスのオプション数; i++) {
document.getElementById("リストボックスのID").options[i].selected = (i == インデックス番号);
}この方法では、「for」文を使って「options」オブジェクトの要素を一つずつ取り出して「selected」プロパティを設定することで、選択状態になります。
サンプルプログラムは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<script>
function setSelection() {
var selectBox = document.getElementById("mySelect");
for (var i = 0; i < selectBox.options.length; i++) {
selectBox.options[i].selected = (i == 1 || i == 3);
}
}
</script>
</head>
<body>
<select id="mySelect" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="orange">Orange</option>
<option value="peach">Peach</option>
</select>
<br><br>
<button onclick="setSelection()">Set Selection</button>
</body>
</html>このサンプルでは、HTML DOMの「getElementById」メソッドを利用して「mySelect」というIDを持つリストボックスを取得しています。次に、「for」文を使って「options」オブジェクトの要素を一つずつ取り出して「selected」プロパティを設定しています。最後に「Set Selection」というボタンを押すと、「Banana」と「Orange」が選択状態になります。
このように、「複数選択リストボックスの値の設定方法」は、JavaScriptの「for」文を利用することで簡単に実現することができます。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
まとめ
複数選択リストボックスの値を取得・設定する方法について解説しました。
- 配列とoptionsプロパティを使用することで複数選択リストボックスから値を取得することができます。
- optionsプロパティとselectedプロパティを使用することで複数選択リストボックスに値を設定することができます。
- 複数選択リストボックスから値を取得するときには、forループやforEachメソッドなどを使って一つずつアクセスすることができます。
- 複数選択リストボックスに値を設定するときには、特定の項目のselectedプロパティをtrueに設定することで選択状態にすることができます。
複数選択リストボックスから値を取得する方法がわかりました。
今回取り上げた「:checked」セレクタもJavaScriptでフォームの値を取得する際によく使われるので覚えておいても良いでしょう。
コメント