JavaScriptプログラムに関する各種メモ書き

ドロップダウンリスト(オプション・メニュー)のスタイルを変更するjQueryプラグイン【jquery.customSelect】

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');

関連エントリー

No.931
03/07 11:48

edit

jQuery