ITコラム

jQuery

2018.06.07

jQuery【 jQuery UI 】multiselect widget を使用して複数選択できるドロップダウンを作成

jQuery UI の multiselect widget を利用すると、複数選択が可能なドロップダウンを作成することができます。
今回は、multiselect widget の使用方法について紹介します。

１．multiselect widget を使用して複数選択できるドロップダウンを作成

　
jQuery UI の multiselect を使用して複数選択が可能なドロップダウンリストを作成します。
ドロップダウンリストから項目を複数選択してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/3.0.0/jquery.multiselect.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function(){
  $("#wkSelect").multiselect();
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <select id="wkSelect" multiple="multiple">
    <option value="op1">Achille Castiglioni</option>
    <option value="op2">Alvar Aalto</option>
    <option value="op3">Arne Jacobsen</option>
    <option value="op4">Borge Mogensen</option>
    <option value="op5">Castiglioni Bros.</option>
    <option value="op6">Charles&Ray Eames</option>
    <option value="op7">Claudio F. Bellini</option>
    <option value="op8">Eames&Saarinen</option>
    <option value="op9">Eero Aarnio</option>
    <option value="op10">Eero Saarinen</option>
  </select>
</div>

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
　
jQuery UI の導入の他に、multiselect widget を使用するために jquery.multiselect.js の CDNを使用して HTMLファイル内で次のように読み込んでいます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/3.0.0/jquery.multiselect.js"></script>

jquery.multiselect.js ファイルを導入すると、対象となる select 要素を指定して multiselect メソッドを呼び出すだけで、複数選択が可能なドロップダウンを作成することができます。

▲目次へ戻る

２．multiselect のオプション

　
multiselect は、次のようなオプションを設定することができます。

header	ドロップダウンリストのヘッダーの表示を指定 true：「Check all」、「Uncheck All」、「x」ボタンを表示 false：「Check all」、「Uncheck All」、「x」ボタンを非表示文字列を指定：指定した文字列を表示初期値：true
height	px単位でスクロール領域の高さを指定初期値：175
minWidth	px単位で全体の最小幅を指定（ auto に設定すると無効）初期値：225
checkAllText	「Check all」ボタンのテキスト内容を指定初期値：”Check all”
uncheckAllText	「Uncheck All」ボタンのテキスト内容を指定初期値：”Uncheck All”
noneSelectedText	チェックボックス未選択の場合のテキスト内容を指定初期値：”Select options”
selectedText	オプションが選択されている場合、シャープ（#）を選択された数に置換初期値：# selected
selectedList	初期値：false
show	メニューを開く際に適用する効果（+時間）を指定 show：”bounce” show：[“bounce”, 200]
hide	メニューを閉じる際に適用する効果（+時間）を指定 hide：”explode” hide：[“explode”, 1000]
autoOpen	初期化した際に自動的にメニューを開くかどうかを指定初期値：false
multiple	チェックボックスを表示するかどうか指定初期値：true
classes	カスタマイズする際にボタンとメニューの両方に適用するための追加クラスを指定
position	ドロップダウンメニューの表示位置を配置