jQuery API の change( fn ) は、チェンジイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
select、input、textarea 要素の値を変更したときに、change( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . change( イベンドハンドラ );
「セレクター」の要素のチェンジイベントに、「イベンドハンドラ」をバインド。
select 要素での実装例(サンプル)
好きな音楽ジャンル:
select 要素での実装例(サンプル)の動作について
select 要素で選択した音楽ジャンルを、「好きな音楽ジャンル: 」の右側に表示する。
select 要素での実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-change-select' ) . change( function () {
var str = "";
jQuery( '#jquery-api-change-select option:selected' ) . each( function () {
str += jQuery( this ) . text() + " ";
} );
jQuery( '#jquery-api-change-selected' ) . text( str );
} )
.change();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-change-select' ) . change( function () {
var str = "";
jQuery( '#jquery-api-change-select option:selected' ) . each( function () {
str += jQuery( this ) . text() + " ";
} );
jQuery( '#jquery-api-change-selected' ) . text( str );
} )
.change();
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-change-select {
margin: 0;
}
-->
</style>
<!--
#jquery-api-change-select {
margin: 0;
}
-->
</style>
HTML
<select id="jquery-api-change-select" name="favoriteMusic" multiple="multiple">
<option>ポップス</option>
<option selected="selected">ロック</option>
<option>テクノ</option>
<option selected="selected">ジャズ</option>
<option>ボサノバ</option>
<option>レゲェ</option>
</select>
<p>好きな音楽ジャンル: <span id="jquery-api-change-selected"></span></p>
<option>ポップス</option>
<option selected="selected">ロック</option>
<option>テクノ</option>
<option selected="selected">ジャズ</option>
<option>ボサノバ</option>
<option>レゲェ</option>
</select>
<p>好きな音楽ジャンル: <span id="jquery-api-change-selected"></span></p>
input 要素での実装例(サンプル)
入力した文字:
input 要素での実装例(サンプル)の動作について
input 要素にテキストを入力しフォーカスを外すと、入力したテキストを「入力した文字: 」の右側に表示する。
input 要素での実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-change-input' ) . change( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-change-input-contents' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-change-input' ) . change( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-change-input-contents' ) . text( str );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-change-input {
margin: 0;
}
-->
</style>
<!--
#jquery-api-change-input {
margin: 0;
}
-->
</style>
HTML
<p><input type="text" id="jquery-api-change-input" name="jquery-api-change-input"></p>
<p>入力した文字: <span id="jquery-api-change-input-contents"></span></p>
<p>入力した文字: <span id="jquery-api-change-input-contents"></span></p>
textarea 要素での実装例(サンプル)
入力した文字:
textarea 要素での実装例(サンプル)の動作について
textarea 要素にテキストを入力しフォーカスを外すと、入力したテキストを「入力した文字: 」の右側に表示する。
textarea 要素での実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-change-textarea' ) . change( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-change-textarea-contents' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-change-textarea' ) . change( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-change-textarea-contents' ) . text( str );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-change-textarea {
margin: 0;
width: 500px;
}
-->
</style>
<!--
#jquery-api-change-textarea {
margin: 0;
width: 500px;
}
-->
</style>
HTML
<p><textarea id="jquery-api-change-textarea" name="jquery-api-change-textarea"></textarea></p>
<p>入力した文字: <span id="jquery-api-change-textarea-contents"></span></p>
<p>入力した文字: <span id="jquery-api-change-textarea-contents"></span></p>