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

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

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 は、次のようなオプションを設定することができます。

▲目次へ戻る

3. まとめ

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

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

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

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

▲目次へ戻る