使用方法

まずは「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要素のように記述し、必要であれば任意でクラスを指定しておきます。

HTML

<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やクラス指定をしている場合などは変更してください。

jQuery

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

上記手順だけで簡単に装飾もされ、select要素が以下のキャプチャにような見栄えになるのを確認できます。

実装できる機能

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

• プレースホルダを付加
• 接頭語（prefix）を付加
• キーボードサイクル

  ※上下キーで項目を移動できるようになります

• リンク指定

  ※項目選択時に指定されているリンクに飛びます

• サイズ指定

  ※沢山項目があっても指定した数だけ表示されるようにでき、指定数以上はスクロールで見れるようになります

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

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

これを下記の赤字部分のようにdata属性を追記する（HTMLを変更する）形で同じ機能を実装することも可能で、同ページに複数設置はしているけどひとつだけ異なる機能を付けたいという時などにも便利だと思います。

HTML

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

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

見栄えを変更する

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

また、デベロッパーツールなどで確認すると分かりやすいと思いますが、セレクトのフォーカス時やオープン時、項目のホバー時やカレント時など細かいところにもそれぞれクラスが付加されるようになっているので、そういった動きにも見栄えの変化をつけたい人には嬉しいと思います。
一部記述されているクラス名を紹介すると、デフォルト時に見える部分が.sod_select、それぞれの項目は.sod_option、optgroupには.optgroup、あとはホバー時に.activeが付いたり、選択されている項目に.selectedというクラスが付加されます。