Javascript まるでExcelのフィルタのようにドロップダウンで複数選択できるjQueryプラグイン ホームページ制作 | 墨田区

Javascript まるでExcelのフィルタのようにドロップダウンで複数選択できるjQueryプラグイン

LINEで送る
Pocket

jQuery UI Multiselect プラグイン Excel に慣れたユーザーからはよく「Excel のあの機能を実現してよ」なーんて要望、よく聞きませんか?

今回は、Excel のフィルタ機能のように ドロップダウン(プルダウン)の中身を複数選択したい場合に利用できる jQuery プラグインをご紹介します。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


この jQuery プラグインの名前は、
「jQuery UI MultiSelect Widget」といいます。
jQuery/jQuery UI を組み合わせて動作します。


使い方

使い方はとっても簡単!
jQuery/jQuery UI 、そしてこのプラグインのスクリプト、スタイルシートを組み込みます。そして、以下のような JavaScript を記述します。

$('対象の要素').multiselect({
    checkAllText: 'Check All',
    uncheckAllText: 'Uncheck All',
    noneSelectedText: 'Select options',
    selectedText: '# of # selected',
});

Text 値はもちろん日本語でも問題ありません。

パラメータ内容
checkAllTextチェックボックスを全選択するための項目ラベル
uncheckAllTextチェックボックスを全解除するための項目ラベル
noneSelectedText項目が選択されていないときに、ドロップダウンに表示するラベル
selectedText項目が選択されているときに、ドロップダウンに表示するラベル


サンプルソース

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>multiselect blog post demo - jsFiddle demo by ehynds</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css">
  <script type='text/javascript' src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/master/src/jquery.multiselect.js"></script>
  <link rel="stylesheet" type="text/css" href="http://erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
  <style type='text/css'>
    body {
    font-size: 13px;
	}
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("select").multiselect({
   selectedText: "# of # selected"
});
});//]]>
</script>
</head>
<body>
<select multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
</body>
</html>

デモ



参考サイト

・jQuery UI MultiSelect Widget – Eric Hynds
http://www.erichynds.com/blog/jquery-ui-multiselect-widget
※現在、リンク切れとなっています。


こういう便利なプラグインがあると、開発者としてはとても助かりますね。ありがたや、ありがたや。

おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL