こんにちは。
今回はjQueryを使ってselect（セレクトボックス）でplaceholderを作る！です。
他のフォーム部分のパーツ（inputやtextarea）と同じようにセレクトボックスでplaceholderのような動きがしたい時ってありますよね！
今回はそれのメモ書きです！
jQueryを使ってselect（セレクトボックス）でplaceholderを作る！
HTML
selectにidを付けます。
1 2 3 4 5 6 7 8 | <select id="age"> <option value="0" selected="selected">デフォルト</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> |
CSS
.placeに文字色を指定します。
1 2 3 | .place { color: #CCC; } |
jQuery
0の時、つまりデフォルトの状態の時にselectにplaceというクラスを追加しています。
それ以外の時はplaceというクラス名を外しています。
1 2 3 4 5 | $("#age").change(function () { if($(this).val() == "0") $(this).addClass("place"); else $(this).removeClass("place") }); $("#age").change(); |
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)
以上でjQueryを使ってselect（セレクトボックス）でplaceholderを作る！でした。
参考サイト：Edit fiddle – JSFiddle
