[ jQuery ] SELECT の change イベントで選択項目の変更をキャンセルする ( iPad – safari 対応 )

Pocket

ここでは、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 イベントでキャンセル処理風の動作となりました。

 

スポンサーリンク


Pocket

One thought on “[ jQuery ] SELECT の change イベントで選択項目の変更をキャンセルする ( iPad – safari 対応 )”

Leave a Reply to 通りすがりの初心者 Cancel Reply

Your email address will not be published. Required fields are marked *