jQuery – 取消下拉列表的确认对话框中的更改事件

我有一个下拉列表，我有jQuery changefunction。

我想根据确认对话框实现所选项目的更改。

如果确认为真，我可以继续选择更改，否则我将现有项目保持为已选中并取消更改事件。

我如何用jQuery实现这个？

jquery函数

 $(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 } }); }); 

记住change函数的一件事只有在选定的项目改变之后才会命中所以最好考虑在onchange上实现它 – 但它在jquery中不可用。 有没有办法实现这个？

Answer 1

好吧，正如Vinu正确指出的那样，jQuery的change事件仅在select值实际发生变化时触发。 你最好做这样的事情：

 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 2

像我在这里做的一样？

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 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

下面的代码是针对单选按钮实现的。我认为这个带有微小变化的代码也可以用于下拉。

  test1  test2  test3  $("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); } }); 

Answer 5

据我所知你必须自己处理，这可能有所帮助：

Answer 6

模糊，聚焦和存储以前的值似乎有点麻烦。 我通过将我的监听器不是附加到选项来解决这个问题，而是选择：

 $("#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(); } 

当然可以进行优化，但这是一般的想法。