column

ITコラム

mv10448

プログラミングノウハウ

2018.06.07

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

▲目次へ戻る

3. まとめ

jQuery UI の multiselect widget について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ