<i class="fa fa-github fa-2x"></i> jquery.customSelect

https://github.com/adamcoulombe/jquery.customSelect

ダウンロードするには【Download ZIP】のアイコンをクリック

＜select＞の後ろに＜span class="customSelect"＞というタグを追加することによりドロップダウンリスト（オプション・メニュー）のスタイルを変更するプラグインです。

■ 使い方

<select class="my_form">
<option value="">選択してください</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>

というHTMLを用意して

<script src="jquery.min.js"></script>
<script src="jquery.customSelect.js"></script>
<script>
$(function(){
    $(".my_form").customSelect();
});
</script>

で実行します。

■ 動的に値を書き換える（ドロップダウンリストの状態を変更する）場合

動的に＜select＞の値を変更しても、jquery.customSelectによって生成された＜span＞の状態までは書き換えられません。

そこで次のように「trigger('render')」を使って書き換えを行います。

$(".my_form").val('土曜日');
$(".my_form").trigger('render');