読者です 読者をやめる 読者になる 読者になる

白猫のメモ帳

JavaとかJavaScriptとかHTMLとか機械学習とか。

プルダウンの変更を取り消したい

JavaScript

たとえばこんなプルダウンがあるとして。

f:id:Shiro-Neko:20140712115001j:plain

ついうっかり変えてしまうと困るわけですよ。

f:id:Shiro-Neko:20140712115721j:plain

なのでこうChageイベントを拾って、確認ダイアログとか出してあげるじゃないですか。

f:id:Shiro-Neko:20140712115735j:plain

でもこれ「キャンセル」押してもプルダウンは元には戻らないんですよね。
困ったもんです。

検索するとhiddenに値を入れておいてどうこう…ってのが多いみたいですが、
画面項目はあんまり増やしたくないのでクロージャを使ってこんな感じはどうかな。

(function($) {
  $.fn.exChange = function(callback, fn) {
 
  // 値取得用関数定義(なければvalueをとる)
  var func = fn || function() { return $(this).val(); };
  
  $(this).each(function() {
   
   // イベントバインド時に入力内容を保持
   var val = func.apply(this);
   
   // changeイベントにバインド
   $(this).change(function() {
   
    // 発火前にargumentsの末尾に変更前の値を入れる
    Array.prototype.push.call(arguments, val);
    
    // イベントを発火
    callback.apply(this, arguments);
    
    // 終わったら更新しておく
    val = func($(this));
   });
  });
 }
})(jQuery); 

普通のchangeイベントみたいにバインドすると、
コールバック関数に変更前の値が入ってくるっていう仕組み。

$("#pull").exChange(function(event, prev) {
    if (!confirm('本当に変更してよろしいですか?')) {
         return $(this).val(prev);
    }
});

こんな感じかな。

値取得はvalue固定でもいいんだけどまぁ一応textareaとかでも使いたいかなと思って
関数指定できるようにしてみた感じ。

liveとかdelegateとかonみたいには使えないのがちょっと難点かな。

【追記】

コメント欄で指摘を頂きまして、callbackの呼び出しを修正しました。