jQuery UI の multiselect widget を利用すると、複数選択が可能なドロップダウンを作成することができます。
今回は、multiselect widget の使用方法について、解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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 は、次のようなオプションを設定することができます。
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 | ドロップダウンメニューの表示位置を配置 |
jQuery UI の multiselect widget について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.