[jQuery] selectボックスのchangeイベントが動かない場合の対処方法

jQueryでは、セレクトボックスの値が変更された時に他の処理を行いたい場合にchangeを使います。

都道府県を選択すると、それに対応する市区町村が別のセレクトボックスに表示されるというプログラムを作るときによく出てきますね。

jQueryの書き方に注意しないと動かないので、動かない例と動く例を書いておきます。

selectに限らずjQueryを使う場合にやってしまうのが、下記のような例です。

$('#testSelect').change(function() {
    var str = $(this).val();
}));

$('#testSelect').change(function() {

var str = $(this).val();

}));

これはまったく動作しません。

それでは、動作するにはどうしたら良いのか？

こちらがきちんと動くバージョンです。

$(function($) {
    $('#testSelect').change(function() {
        var str = $(this).val();
    });
});

$(function($) {

$('#testSelect').change(function() {

var str = $(this).val();

});

$(function() {})ではじめに記載したプログラムを囲みます。

jQuery.ready(function() {})で囲んでも意味は同じですが、短い書き方の方が良いでしょう。

jQueryの基本書などに当たり前に書いてあることなんですが、久しぶりにjQueryを触ったりすると忘れていたりします。

SearchLight