2016年8月30日火曜日

selectプレースホルダ―実装

説明:
selectのプレースホルダ―機能を提供されていないため、似ている効果を試して実装しました。
まず、空のoptionを用意します。
空のoptionを選択すると、空optionはプレースホルダ―のdefault色で空のoptionテキストを表示します。

<select name="a">
<option value="0">都道府県</option>
<option value="1">北海道</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
</select>

 プレースホルダ―のdefault色:'#999'
普通文字色:'#555'

①画面初期化時、
$("select[name=a]").find("option[value='0']").css({'color': '#999'});

②select変更時
$("select[name=a]").change(function(){
if($(this).val() == '0'){
$(this).css({'color': '#999'});
$(this).find("option").css({'color': '#555'});
$(this).find("option[value='0']").css({'color': '#999'});
} else {
$(this).css({'color': '#555'});
}
});

0 件のコメント: