
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.06.07
jQuery UI の multiselect widget を利用すると、複数選択が可能なドロップダウンを作成することができます。
今回は、multiselect widget の使用方法について紹介します。
1.multiselect widget を使用して複数選択できるドロップダウンを作成
2.multiselect のオプション
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 | ドロップダウンメニューの表示位置を配置 |
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.