使用したもの

jQuery
jQueryUI
jquery.multiselect.js
jquery.multiselect.css

コード

html

<select id="example" name="example" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

script

$(document).ready(function(){
   $("#example").multiselect({
       header: true,
       height:,175
       minWidth:,225
       checkAllText:"すべて",
       uncheckAllText:"未選択",
       noneSelectedText:,
       selectedText:"# 個選択",
       selectedList: 3,
       show:,['bounce',500],
       hide:,['drop',500],
       autoopen:false,
       multiple:true,
       classes:'.multi__etc'

       position: {
            my:'center',
            at:'center'
        }
   });
});

Option詳細

すべてのオプションを記入しなくてもいいが
その場合はデフォルト値のオプションが適用される

header (default:true)

true:

ドロップダウンヘッダーに"check all","uncheck all"×ボタンが表示される
別オプションのcheckAllTextやuncheckAllTextに任意の文字を入れると
それに従って表示する

false:

ドロップダウンのヘッダーなし

文字列:

ドロップダウンのヘッダーに指定した文字列と×ボタンが表示される.

height (default:175)

選択領域の高さを指定(px)

minWidth (default:225)

全体の横幅の最小サイズを指定(px)

checkAllText (default:Check All)

文字列を入力するとドロップダウンヘッダーのCheck Allボタンに表示する文字を指定した文字列に変更する。

uncheckAllText (default:Uncheck All)

文字列を入力するとドロップダウンヘッダーのUncheck Allボタンに表示する文字を指定した文字列に変更する。

noneSelectedText (default:Select Option)

文字列を入力するとチェックボックス未選択時に表示されるSelect Optionを指定した文字列に変更する。

selectedText (defalut:# selected)

チェックボックスを選択しているとき#に選択個数を表示する。

selectedList (default: false)

数値を入力すると
ドロップダウンリストの選んだものを、指定された数値を上限にドロップダウンのバーに表示する。
上限を超えたときはselectedTextに指定してるものが表示される。

show (defalut:empty string)

ドロップダウンを開くときに使用する効果と効果時間(ms)で設定する
詳しくはjQueryUiエフェクト

hide (defalut:empty string)

ドロップダウンを閉じるときに使用する効果と効果時間(ms)で設定する
詳しくはjQueryUiエフェクト

autoopen (default:false)

true

スクリプトのロード時に自動でドロップダウンを開く

false

スクリプトのロード時に自動でドロップダウンを開かない

multiple (default:true)

true

チェックボックスを複数選択することができる。

false

チェックボックスを複数選択することができない。

classes (defalut:empty object)

カスタマイズするために指定したクラスを
.ui-multiselect .ui-multiselect-menu
に追加する

position (defalut:empty object)

ドロップダウンの表示位置を調整することができる。

jQuery UI multiselectの備忘録