jQuery - ドロップダウンの確認ダイアログで変更イベントをキャンセルする

Question

私はドロップダウンを持っていますが、私はjQueryの "変更"機能を持っています。

私は、確認ダイアログで選択した項目の変更を実装したいと思います。

私が選択した変更を進めることができる場合は、既存のアイテムを選択したままにして、変更イベントをキャンセルします。

これをjQueryでどのように実装できますか？

jqueryの機能

<script type="text/javascript"> 
    $(function() { 

     $("#dropdown").change(function() { 

       var success = confirm('Are you sure want to change the Dropdown ????'); 

        if (success == true) { 
         alert('Changed'); 

// do something     
        } 
        else { 

         alert('Not changed'); 

         // Cancel the change event and keep the selected element 
        } 
     }); 
    }); 

</script> 

NB：「変更」機能を覚えておくべき一つのことは後にのみ、選択した項目は、「のonchange」でこれを実装するために考えることだから、より良い を変えヒット - それはjqueryのでは利用できず、これを実装する方法はありますか？

任意の助けが理解されるであろう

...

Vinu

Answer 1

私がここで何をしたかのような何か？

http://jsfiddle.net/Swader/gbdMT/

だけで、すぐにユーザーが選択ボックスをクリックすると値を保存し、確認のonchangeがfalseを返した場合は、この値に戻します。ここで

は私のバイオリンからのコードです：

まあ

var lastValue; 

$("#changer").bind("click", function(e) { 
    lastValue = $(this).val(); 
}).bind("change", function(e) { 
    changeConfirmation = confirm("Really?"); 
    if (changeConfirmation) { 
     // Proceed as planned 
    } else { 
     $(this).val(lastValue); 
    } 
}); 

Answer 2

、Vinuが正しく指摘しているように選択の値が実際に変更された後、jQueryのchangeイベントのみがトリガされます。あなたはこのような何かをやったほうが良いでしょう：

var prev_val; 

$('#dropdown').focus(function() { 
    prev_val = $(this).val(); 
}).change(function() { 
    $(this).blur() // Firefox fix as suggested by AgDude 
    var success = confirm('Are you sure you want to change the Dropdown?'); 
    if(success) 
    { 
     alert('changed'); 
     // Other changed code would be here... 
    } 
    else 
    { 
     $(this).val(prev_val); 
     alert('unchanged'); 
     return false; 
    } 
}); 

Answer 3

使用次のコードは、私はそれをテストしているし、その作業

var prev_val; 
$('.dropdown').focus(function() { 
    prev_val = $(this).val(); 
}).change(function(){ 
      $(this).unbind('focus'); 
      var conf = confirm('Are you sure want to change status ?'); 

      if(conf == true){ 
       //your code 
      } 
      else{ 
       $(this).val(prev_val); 
       $(this).bind('focus'); 
       return false; 
      } 
}); 

Answer 4

以前の値を、ぼかし中心と保存は少し面倒なようです。私は選択しないように、私のリスナーを取り付けることにより、この問題を解決しますが、オプションに：コースの最適化、その後

$("#id").on('mousedown','option',confirmChange); 

、

function confirmChange(e){ 
    var value = $(this).val(), 
     c = confirm('Are you sure you want to change?'); 

    if(c) 
     $(this).parent().val(value);//can trigger .change() here too if necessary 
    else 
     e.preventDefault(); 
} 

を行うことができますが、これは一般的な考え方です。

Answer 5

以下のコードはラジオボタン用に実装されています。このコードはマイナーチェンジでドロップダウンすることもできます。

 <input type="radio" class="selected" value="test1" name="test1" 
     checked="checked" /><label>test1</label> 

     <input type="radio" name="test1" value="test2" /><label> 
     test2</label> 

     <input type="radio" name="test1" value="test3" /><label> 
     test3</label> 

</div> 

$("input[name='test1']").change(function() { 
     var response = confirm("do you want to perform selection change"); 
     if (response) { 
      var container = $(this).closest("div.selection"); 
      //console.log(container); 
      //console.log("old sel =>" + $(container).find(".selected").val()); 
      $(container).find(".selected").removeClass("selected"); 
      $(this).addClass("selected"); 
      //console.log($(this).val()); 
      console.log("new sel =>" + $(container).find(".selected").val()); 
     } 
     else { 
      var container = $(this).closest("div.selection"); 
      $(this).prop("checked", false); 
      $(container).find(".selected").prop("checked", true); 
     } 
    });