jQueryを使ってselect(セレクトボックス)でplaceholderを作る!

2015/02/02

jquery_select_placeholder

こんにちは。
今回はjQueryを使ってselect(セレクトボックス)でplaceholderを作る!です。

他のフォーム部分のパーツ(inputやtextarea)と同じようにセレクトボックスでplaceholderのような動きがしたい時ってありますよね!
今回はそれのメモ書きです!

jQueryを使ってselect(セレクトボックス)でplaceholderを作る!

HTML

selectにidを付けます。

[html]

[/html]

 

CSS

.placeに文字色を指定します。

[css]
.place {
color: #CCC;
}
[/css]

 

jQuery

0の時、つまりデフォルトの状態の時にselectにplaceというクラスを追加しています。
それ以外の時はplaceというクラス名を外しています。

[javascript]
$(“#age”).change(function () {
if($(this).val() == “0”) $(this).addClass(“place”);
else $(this).removeClass(“place”)
});
$(“#age”).change();
[/javascript]

 

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

 

以上でjQueryを使ってselect(セレクトボックス)でplaceholderを作る!でした。

参考サイト:Edit fiddle – JSFiddle

この記事を読んだ人はこんな記事も読んでいますよ