jquery changeメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery change()メソッド

changeメソッドは、セレクタで指定した要素のフォームの値が変更された場合に処理を実行するメソッドです
テキスト入力の場合は、フォーカスが外れてから処理が実行されます

$("セレクタ").change(function(){
	フォームの値が変更された場合にフォーカスが外れてから処理を実行します
});

指定したフォームの値が変更された場合に処理を実行します

下記の場合は、input要素にvalメソッドで最初にテキストを表示しておき、フォーカス状態のときにテキストを非表示、フォーカスはずれたときにchangeメソッドでテキストを表示しています。if文を使ってテキストが入力されてない場合のみ、テキストを表示しています

jquery

$(function() {
$("select").change(function(){
	$("span#hoge").text($("select").val());
	});
$("input").change(function(){
	$("span#hoge2").text($("input").val());
	});
});

html

<fieldset>
<legend>メールフォーム</legend>
<p><select name="f4">
<option value="ご意見">ご意見</option>
<option value="質問">質問</option>
<option value="クレーム">クレーム</option>
</select>
<br>select要素のchangeした値を取得しました:<span id="hoge"></span></p>
<p><label>メール入力欄:<input type="text" name="f2" value="" size="45"></label>
<br>input要素のchangeした値を取得しました:<span id="hoge2"></span></p>
<p><button>送信</button></p>
</fieldset>

※サンプルのためサーバーには送信されません

メールフォーム


select要素の値がchangeしました:


input要素の値がchangeしました:








(C)2012 ホームページ作成無料