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
    });
  • このエントリーをはてなブックマークに追加

関連記事

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

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

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

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

「jqPlot」 カスタマイズ

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

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

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

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

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

Comment

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

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

*

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

    PAGE TOP ↑