【JavaScript】複数選択(multiple)可能なselect要素の値取得と設定方法
更新日：2023/08/10
以前、HTMLのselectタグからJavaScriptで値を取得したり、設定したりする方法を紹介しました。
今回は、multiple属性が付加され複数選択が可能なselectタグからJavaScriptで値を取得したり、設定したりする方法を紹介します。
複数選択(multiple)可能なselect要素
select要素は次のようにタグ内にmultipleを記述すると、複数選択できるようになります。
<select id="animal" name="animal" multiple >
<option value="dog" selected >イヌ</option>
<option value="cat">ネコ</option>
<option value="panda">パンダ</option>
</select>
今回は、このタグを例にして解説していきます。
なお単一選択(multipleなし)のselect要素の値取得と設定もこのページの内容で行えますが、より単純な方法での処理が可能です。
詳しくは、次のページで解説しているので参考にしてください。
値の取得
select要素が複数選択モードのときの、value属性、インデックス番号、表示されている文字の取得方法の３種類を紹介します。
value属性の取得
select要素は selectedOptionsプロパティに、選択されているoption要素の参照がセットされています。
このoption要素のvalueプロパティを一つずつ確認することで、現在選択されている項目のvalue属性を取得できます。
const selbox = document.getElementById( "animal" );
// 選択済みオプションのvalue値を取得
const getSelectedValues = selectElement =>
Array.from( selectElement.selectedOptions , e=>e.value );
console.log( `初期: ${ getSelectedValues(selbox).join(",") } が選択された！` );
let c = 1;
selbox.addEventListener( "change" ,()=>{
console.log( `${c++}回目:"${ getSelectedValues(selbox).join(",") }"が選択された！` );
});
▶
インデックス番号の取得
現在選択されているoptionのインデックス番号は、option要素のindexプロパティで取得できます。
const selbox = document.getElementById( "animal" );
// 選択済みオプションのインデックスを取得
const getSelectedIndexes = selectElement =>
Array.from( selectElement.selectedOptions, e=>e.index);
console.log( `初期インデックス: ${ getSelectedIndexes(selbox).join(",") } が選択された！` );
let c = 1;
selbox.addEventListener( "change" ,()=>{
console.log( `${c++}回目:インデックス ${ getSelectedIndexes(selbox).join(",") } が選択された！` );
});
▶
表示されている文字の取得
現在選択されているoptionのインデックス番号は、option要素のinnerTextプロパティで取得できます。
const selbox = document.getElementById( "animal" );
// 選択済みオプションの文字列を取得
const getSelectedTexts = selectElement =>
Array.from( selectElement.selectedOptions, e=>e.innerText);
console.log( `初期: ${ getSelectedTexts(selbox).join(",") } が選択された！` );
let c = 1;
selbox.addEventListener( "change" ,()=>{
console.log( `${c++}回目: ${ getSelectedTexts(selbox).join(",") } が選択された！` );
});
▶
値の設定
取得と同じように、value属性、インデックス番号、表示文字列で選択項目を設定する方法を紹介します。
ここでは、次のような二つのselectタグを想定して、一つ目のselectが変更されたら、その内容で二つ目のselectを変更するコードを作成しています。
<select id="animal1" name="animal" multiple >
<option value="dog" selected>イヌ</option>
<option value="cat" >ネコ</option>
<option value="panda">パンダ</option>
<option value="koala">コアラ</option>
</select>
<select id="animal2" name="animal" multiple >
<option value="dog" selected>イヌ</option>
<option value="cat" >ネコ</option>
<option value="panda">パンダ</option>
</select>
value属性での設定
複数選択モードのときvalue属性で選択状態を変更するには、select要素のoptionsプロパティにセットされているoption要素を検索して、valueが一致するものを探します。
一致したら、そのoption要素のselectedプロパティにtrueをセットします。
一致しない時は、falseをセットします。
// value値の取得関数
const getSelectedValues = selectElement =>
Array.from( selectElement.selectedOptions , e=>e.value );
// value値で選択状態を変更する関数
const setSelectedValues = (selectElement,values) =>
Array.from( selectElement.options ).forEach(e=>e.selected = values.indexOf( e.value ) >= 0 );
// 変更元
const selboxFrom = document.getElementById( "animal1" );
// 変更先
const selboxTo = document.getElementById( "animal2" );
let c=1;
selboxFrom.addEventListener( "change" ,()=>{
const values = getSelectedValues(selboxFrom);
setSelectedValues(selboxTo,values);
const values2 = getSelectedValues(selboxTo);
console.log( `${c++}回目： [${values.join(",")}] をセット⇒結果[${values2.join(",")}]` );
});
▶⇒
インデックス番号での設定
複数選択モードのときインデックス番号で選択するには、select要素のoptionsプロパティ内の対応するインデックス番号でループします。
その際に現在のインデックス番号が指定されたインデックス番号に含まれていたら、selectedプロパティにtrueをセットします。
そうでなければ、selectedプロパティにfalseをセットします。
// 選択済みオプションのインデックスを取得
const getSelectedIndexes = selectElement =>
Array.from( selectElement.selectedOptions, e=>e.index );
// インデックスで選択状態を変更する関数
const setSelectedIndexes = (selectElement,indexes) =>
Array.from( selectElement.options ).forEach((e,index)=>e.selected = indexes.indexOf(index) >= 0 );
// 変更元
const selboxFrom = document.getElementById( "animal1" );
// 変更先
const selboxTo = document.getElementById( "animal2" );
let c=1;
selboxFrom.addEventListener( "change" ,()=>{
const indexes = getSelectedIndexes(selboxFrom);
setSelectedIndexes(selboxTo,indexes);
const indexes2 = getSelectedIndexes(selboxTo);
console.log( `${c++}回目： [${indexes.join(",")}] をセット⇒結果[${indexes2.join(",")}]` );
});
▶⇒
表示文字列での設定
複数選択モードのとき表示文字列で選択状態を変更するには、select要素のoptionsプロパティにセットされているoption要素を検索して、innerTextが一致するものを探します。
一致したら、そのoption要素のselectedプロパティにtrueをセットします。
一致しない時は、falseをセットします。
// 選択済みオプションの文字列を取得
const getSelectedTexts = selectElement =>
Array.from( selectElement.selectedOptions, e=>e.innerText);
// 表示文字で選択状態を変更する関数
const setSelectedTexts = (selectElement,texts) =>
Array.from( selectElement.options ).forEach(e=>e.selected = texts.indexOf( e.innerText ) >= 0 );
// 変更元
const selboxFrom = document.getElementById( "animal1" );
// 変更先
const selboxTo = document.getElementById( "animal2" );
let c=1;
selboxFrom.addEventListener( "change" ,()=>{
const texts = getSelectedTexts(selboxFrom);
setSelectedTexts(selboxTo,texts);
const texts2 = getSelectedTexts(selboxTo);
console.log( `${c++}回目： [${texts.join(",")}] をセット⇒結果[${texts2.join(",")}]` );
});
▶⇒
更新日：2023/08/10
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
