システム開発ブログ

HTML全般

chosenプラグインを使用しselectタグを使いやすくする

今回はhtmlのselectタグを使いやすくするchosenというjQueryプラグインを紹介したいと思います。

chosenを使用するとselect選択項目を検索することができるようになります。

こんな感じになります。
20160927_001.png

20160927_003.png

1.chosenプラグインをダウンロードし適当なディレクトリにプラグイン等を配置する


■ダウンロードページ
https://harvesthq.github.io/chosen/

■最低限下記ファイルがあれば十分だと思います
・jqueryプラグイン
・chosen.jquery.min.js
・chosen.min.css
・chosen-sprite.png

2.必要なプラグイン及びCSSを読み込む







3.selectタグを用意する


■任意のクラス名を指定する(今回は"chosen")
■data-placeholder要素にプレースホルダを指定できます



4.chosenを実行


■search_containsを"true"に設定してあげることで途中検索を許可しています
$(function() {
	$(".chosen").chosen({
		search_contains: true
	})
});


■オプション項目はこれ以外にもありますので下記ページを参照してください
https://harvesthq.github.io/chosen/options.html

簡単ですが以上です。
選択項目が多い場合に導入するとかなり利便性がよくなると思います。

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ