selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手
Chosen CDN

ライブラリ

<link href="chosen.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.min.js" type="text/javascript"></script>

実装

既存のselect(combo)ボックスにidもしくはclassを付与して、以下を追加するだけです。

$("#sel1049").chosen();

jQuery以外のJavascriptフレームワーク用のものもあるようです。

Select2

「Chosen」の場合、ある一定の条件下でドロップダウンが隠れてしまう場合があります。色々議論されているようですが結論がよく分かりません。そこで「Select2」を。
どちらが先かは分かりませんが、そっくりです。こちらは隠れません。実装方法も同じです。
ダウンロード CDN

<script src="jquery.min.js" type="text/javascript"></script>
<link href="select2.css" type="text/css" rel="stylesheet">
<script src="select2.min.js" type="text/javascript"></script>
$("#sel1049").select2();

multipleでデモつくってみました。こちら

Select2 オプション

検索ボックスを無効にする

デフォルトで実装した場合、検索ボックスがドロップダウン内に表示されます。それを無効にする方法。
セレクトボックスのオプション数がminimumResultsForSearch以下の場合、検索ボックスは表示されません。

// オプション数が5つ以下の場合検索ボックスを表示させない。
    $("#sel1049").select2({
        minimumResultsForSearch: 5
    });
  • このエントリーをはてなブックマークに追加

関連記事

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

Comment

kwski へ返信する コメントをキャンセル

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑