従来だとセレクトボックスで選択できるのは１つだけでした。
しかしHTML5からは multiple を使うことで、複数選択が可能になってます。
ただjQueryとかから値を取得する方法が分かりにくい・・
ということで、複数選択可にしたselectから値を取得する方法 をまとめてみました。
このページの目次
HTML5から複数選択できる select を multiple で作れる
複数選択できるセレクトボックスを作りたい場合、、、
select要素に対して multple属性 を設定することで可能
▼ 例えばHTMLコード例を示すならこんな感じ
|
1 2 3 4 5 6 7 |
<select id="sweets" multiple> <option value="m">Marshmallow</option> <option value="e">Eclair</option> <option value="d">Donut</otpion> <option value="o">Oreo</option> <option value="k">KitKat</option> </select> |
ただ単純に multiple を属性追加するだけ（値は必要なし）
これだけで複数選択できるセレクトボックスが作れるとは、今まで知らなかった・・・
ちなみに できあがったセレクトボックスが次の通り
▼ 未選択状態
▼ 複数選択したときの様子
複数選択は Ctrl を押しながら 項目クリック でできます。
（このあたりの独特な操作性はもうすこし改善してほしい、、、）
いちいちチェックボックスとか作りたくないときに便利かもしれません。
jQueryで複数選択のselectの値を取得する方法
それで問題なのが、
どうやって選択されている値を取得するのかということ
今回サンプルとして次のセレクトボックスを作ってみました。
|
1 2 3 4 5 6 7 |
<select id="sweets" multiple> <option value="m">Marshmallow</option> <option value="e">Eclair</option> <option value="d">Donut</otpion> <option value="o">Oreo</option> <option value="k">KitKat</option> </select> |
こういうセレクトボックスの選択されてる値（ m とか d とか k ）を取得するとします。
その場合、jQueryだと次の２つの方法で取得可能です。
１．選択された値をmapで配列に変換する方法
まず１つめは map関数 を使った方法
チェックボックスとかでも同じようにできます。
▼ 例えばこのようなコード
|
1 2 3 4 5 |
var selectedVals = []; $("#sweets :selected").map(function(i, el) { selectedVals.push($(el).val()); }).get(); console.log('selectedVals : ', selectedVals); |
▼ このコードのコンソール出力結果
|
1 |
selectedVals : ["m", "d", "o"] |
配列でちゃんと取得できてます。
ただ色々調べていくうちに、こんな ”非効率な方法” 使う必要ないと判明・・・
２．普通に val から配列で取得する方法
実は select に multiple属性を付けた場合、、、
なんと valメソッド から選択されてる値を配列で取得可能
だから今紹介した map であれこれする必要なんてなかったです。
▼ 実際のコード例はこの通り
|
1 2 3 |
var selectedVals = []; selectedVals = $('#sweets').val(); console.log('selectedVals : ', selectedVals); |
▼ このコードのコンソール出力結果
|
1 |
selectedVals : ["m", "d", "o"] |
こっちの方が数百倍楽
複数選択できるセレクトボックスを作ったなら valメソッド をそのまま使えば問題なし！
ここまでのまとめ
以上、複数指定可なセレクトで値取得する方法でした。
jQueryを使っているなら、普通に valメソッドを使えばいいってだけの話です。
