セレクトボックスを選択しやすくするjQueryプラグイン

JavaScript jQuery

都道府県とかで長いセレクトボックス嫌ですよね。

セレクトボックスを使いやすくするjQueryプラグインを作りました。
ソースはGistに張りました。
セレクトボックスを選択しやすくするjQueryのプラグイン · GitHub


下のようにすればセレクトボックスが拡張されます。

$('selectBox').selectErea();


サンプルです。
セレクトボックスを選択すると右図のような選択ようのレイヤーが表示されます。
class属性にbrを設定したopitonで改行されます。
class属性にgroupを設定したoptionには右borderが表示されます。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/lib/selectErea.js"></script>
</head>
<body>
    <select id="prefecture">
        <option class="br" >指定なし</option>
        <option class="group">北海道</option>
        <option class="br">北海道</option>
        <option class="group">東北</option>
        <option >青森県</option>
        <option >岩手県</option>
        <option >秋田県</option>
        <option >山形県</option>
        <option >宮城県</option>
        <option class="br">福島都</option>
        <option class="group">関東</option>
        <option >茨城県</option>
        <option >栃木県</option>
        <option >群馬県</option>
        <option >埼玉県</option>
        <option >千葉県</option>
        <option >東京都</option>
        <option class="br">神奈川県</option>
        <option class="group">甲信越</option>
        <option >新潟県</option>
        <option >山梨県</option>
        <option class="br">長野県</option>
        <option class="group">東海</option>
        <option >静岡県</option>
        <option >愛知県</option>
        <option >岐阜県</option>
        <option class="br">三重県</option>
        <option class="group">北陸</option>
        <option >富山県</option>
        <option >石川県</option>
        <option class="br">福井県</option>
        <option class="group">近畿</option>
        <option >滋賀県</option>
        <option >京都府</option>
        <option >大阪府</option>
        <option >和歌山県</option>
        <option class="br">兵庫県</option>
        <option class="group">中国</option>
        <option >岡山県</option>
        <option >広島県</option>
        <option >鳥取県</option>
        <option >島根県</option>
        <option class="br">山口県</option>
        <option class="group">四国</option>
        <option >徳島県</option>
        <option >香川県</option>
        <option >愛媛県</option>
        <option class="br">高知県</option>
        <option class="group">九州</option>
        <option >福岡県</option>
        <option >佐賀県</option>
        <option >長崎県</option>
        <option >熊本県</option>
        <option >大分県</option>
        <option >宮崎県</option>
        <option class="br">鹿児島県</option>
        <option class="group">沖縄</option>
        <option >沖縄県</option>
    </select>
</body>
<script type="text/javascript">
//<![CDATA[
$('#prefecture').selectErea();
//]]>
</script>
</html>

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)