jQuery検索機能付きプルダウンメニュー

タグ: | 投稿日: 投稿者:

はじめまして、モリです

入力項目でプルダウンメニューでリスト表示するときに便利なjQueryを紹介。

『chosen』というjQueryプラグイン
項目が多くなってくるとスクロールするのが大変ですよね、このプラグインを使用することで検索が出来るようになります。

chosen1

見た目はこんな感じ

chosen1

テキストのエリアに検索文字を入力するとドンドン絞られていきます。

chosen1

単一の選択だけではなく、複数のMultiSelectにも対応しています。

chosen1

使い方はClass属性に「chosen-select」を指定するだけ。

<select class="chosen-select" multiple="multiple" name="sample"><option value="">Optionを選択してください</option><option value="1">Option1</option><option value="2">Option2</option><option value="2">Option3</option><option value="2">Option4</option><option value="2">Option5</option>
</select>

ダウンロードはこちらからhttps://github.com/harvesthq/chosen/releases

Share on Google+Tweet about this on TwitterShare on StumbleUponShare on Facebook

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>