セレクトボックスでの複数選択を簡単にするjQueryプラグイン

harada 2,280views 更新:2014年3月7日

Aipo.comのユーザー選択画面だとCtrlを押しながらでないと複数ユーザーを一気に選択できないため、もっと簡単にできる方法はないかなと探していて見つけたjQueryプラグインです。jQuery multiselectから、デモが確認とダウンロードができます。

ヘッダに追加

<link rel="stylesheet" type="text/css" href="css/multi-select.css">

HTML例

<select id="pre-selected-options" multiple="multiple">
  <option value="はっさく">はっさく</option>
  <option value="夏みかん">夏みかん</option>
  <option value="伊予柑">伊予柑</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$(function() {
    $('#pre-selected-options').multiSelect();
  });
</script>

jQueryのバージョンは1.8以上でないと動作しないようです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません