ドロップダウンリストの変更イベントを取り消すときに以前の値を設定する方法

Question

私はhtmlページを設計しています。 jqueryまたはjavascriptを使用してドロップダウン要素の変更に関する確認メッセージを表示します。 これを手伝ってください。

確認を求めるコードがあります。キャンセルを選択すると、ドロップダウンの前の項目は選択されません。

$("#dropdownId").change(function(e) 
{ 
     if($(this).val() == "40") 
     { 
      if(confirm("Are you sure")) 
       return true; 
      else 
       return false; 
     } 
}); 

おかげ

Answer 1

あなたは、クリックイベントに、以前の値を格納することが可能と変更イベントに戻ってそれを設定する必要があります。

var setLastSelected = function(element) { 
    $(element).data('lastSelected', $(element).find("option:selected")); 
}; 

$("select").each(function() { 
    setLastSelected(this); 
}); 

$("select").change(function(){   
     if(confirm("Are you sure")) { 
      setLastSelected(this); 
      return true; 
     } 
     else { 
     $(this).data('lastSelected').attr("selected", true); 
     return false; 
     } 
}); 

参照：http://jsfiddle.net/w9JYX/14/

更新：一連のドロップダウンコントロールでより包括的に動作するようにコードを更新しました。クリックハンドラ。ここで

Answer 2

var previous_option = $('#dropdownId option:selected'); 
$("#dropdownId").change(function(e){ 
    var $this = $(this), 
     selected = $this.find('option:selected'); 
    if($this.val() == "40"){ 
     if(confirm("Are you sure")){ 
      previous_option = selected; 
      return true; 
     } else{ 
      selected.removeAttr('selected'); 
      previous_option.attr('selected', 'selected'); 
     } 
    } else{ 
     previous_option = selected; 
    } 
}); 

Answer 3

は、グローバル変数や他の機能を作成することなく、同じラインに沿って少しタイトなソリューションです：

$('#dropdownId') 
    .on('focus', function() { 
     $(this).data("prev", $(this).val()); 
    }) 
    .change(function() { 
     if (confirm('Are you sure?')) { 
      //normal case where the dropdown changes 
      $(this).data("prev", $(this).val()); 
     } else { 
      //if the user doesn't confirm reset the dropdown back to what it was 
      $(this).val($(this).data("prev")); 
     } 
    });