ここでは、SELECT の選択項目が変更をキャンセルする jQuery のサンプルスクリプトを掲載しています。
スポンサーリンク
jQuery に限ったことではないと思われますが、私が経験した限りでは iPad ( safari ) では、SELECT の選択変更のキャンセルは以下のスクリプトでは動作しませんでした。
SELECT 選択項目の変更をキャンセルする
change イベントの中で選択値を設定しなおしている以下のスクリプトですが、その変更は反映されませんでした。
/* * セレクトボックスの change イベントハンドラ */ $("select#sid").change(function(){ if(!confirm("本当に変更しても良いですか?")) { $(this).val("変更前の値"); return false; } });
なお、変更前の値は focus イベントや click イベント時に保持しておいたものです。
キャンセル処理を実現する
イベント内での変更が有効にならないと思われますので、イベント完了後に値を再設定するようにしてキャンセル処理を実現しました。setTimeout 関数を使用して遅延実行させています。
/* * セレクトボックスの change イベントハンドラ */ $("select#sid").change(function(){ if(!confirm("本当に変更しても良いですか?")) { /* * 実行タイミングを 0 msec とすることで、イベント完了後 * すぐに実行されることになる */ setTimeout(function() { $("select#sid").val("変更前の値"); }, 0); return false; } });
無事に SELECT の change イベントでキャンセル処理風の動作となりました。
こんばんは!
jQuery勉強しはじめて半年の者ですが、
とても分かりやすい説明大変勉強になりました!ありがとうございます!