手軽にselect要素の装飾やカスタマイズができるjQueryプラグイン「Select or Die」

目新しいプラグインではないのですが、使わせてもらう機会が多いのでご紹介。
「Select or Die」はselect要素にちょっとした機能を付けたり、用意されているスタイルを使うことで手軽に装飾することができるjQueryプラグインです。ブラウザもIE8から対応しており、jQueryのバージョンも新しいのはもちろん、v1.8でも動作してくれます。
同じようなスクリプトやプラグインは他にもありますが、個人的にselect要素を変更する際にはおすすめのプラグインです。

使用方法

まずは「Select or Die」からプラグインファイルをダウンロードするなどして、jQueryと併せて必要なファイルを読み込みます。（パスなどは自身の環境に合わせて変更してください。）

<link rel="stylesheet" href="css/selectordie.css" />
<script src="js/jquery.js"></script>
<script src="js/selectordie.js"></script>

HTMLは下記のように通常のselect要素を記述し、必要であれば任意でclassを指定しておきます。

<select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <optgroup label="Option Group Label">
    <option value="group.one">Option Group.One</option>
    <option value="group.two">Option Group.Two</option>
  </optgroup>
  <option value="four">Four</option>
  <option value="five">Five</option>
</select>

あとは他のプラグインと同様で、下記のようにスクリプトを実行すればselectの見栄えが変更されたりするのを確認でき、ここでは$('select')と指定していますがHTMLでidやclass指定をしている場合などは変更してください。

jQuery

$(function() {
  $('select').selectOrDie();
});

この手順だけで簡単に装飾もされ、select要素がイメージにような見栄えになるのを確認できます。

プラグイン適用後のイメージ

実装できる機能

デモサイトで実装されている機能や動きを確認することができますが、例えば以下のようなものが用意されています。

プレースホルダを付加
接頭語（prefix）を付加
キーボードサイクル（上下キーで項目移動が可能になる）
リンク指定（項目選択時に指定されたリンクに飛ぶ）
サイズ指定（指定数分の項目のみ表示されるようにでき、指定数以上はスクロールで見れるようになる）

これらはjQueryを記述した箇所で指定することももちろんできますがデータ属性でも指定することが可能になっています。
例として接頭語（prefix）を付加したい場合、jQueryで指定する際には下記のように記述します。

jQuery

$(function() {
  $('select').selectOrDie({
    prefix: "ここに接頭語:"
  });
});

これを下記のようにdata属性で同じ機能を実装することも可能で、同ページに複数設置はしているけどひとつだけ異なる機能を付けたいというときなどにも便利だと思います。

<select data-prefix="ここに接頭語:">
  ・・・
</select>

その他コールバックやメソッドも用意されており、これらを使うことで「項目選択後に〇〇する」だとか「特定の項目を追加または削除する」なども実装可能です。

見栄えを変更する

スクリプトが実行されると元のselectやoptionは非表示となり、span要素を用いて表示されるようになります。
このspan要素にはそれぞれclassが指定されているので、これらを利用して1から自分でスタイリングしたり、同梱されていたselectordie.cssを少しいじったりすれば好みの見栄えに変更することも手軽にできます。

また、デベロッパーツールなどで確認すると分かりやすいと思いますが、フォーカス時やオープン時、項目のホバー時やカレント時など細かいところにもそれぞれclassが付加されるようになっているので、そういった動きにも見栄えの変化をつけたい人には嬉しいと思います。

一部記述されているclass名を紹介すると、デフォルト時に見える部分が.sod_select、それぞれの項目は.sod_option、optgroupには.optgroup、あとはホバー時に.activeが付いたり、選択されている項目に.selectedというclassが付加されます。

サポートはひと通りのモダンブラウザで問題なく動作し、IEはIE8でも利用可能となっています。
実際の動きやプラグインの詳細・ダウンロードは以下より。