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

colmun_main10448

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

目次

 
1.multiselect widget を使用して複数選択できるドロップダウンを作成
2.multiselect のオプション

1.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 メソッドを呼び出すだけで、複数選択が可能なドロップダウンを作成することができます。

▲目次へ戻る

 

2.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 ドロップダウンメニューの表示位置を配置

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です