jQuery - 取消下拉确认对话框上的更改事件

Question

我有一个下拉菜单，我有 jQuery change 函数。

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

如果确认为真，我可以继续进行选定的更改，否则我将现有项目保持为选中状态并取消更改事件。

如何用 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

下面的代码是为单选按钮实现的。我认为这个稍作改动的代码也可以用于下拉菜单。

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

Answer 5

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

<select onFocus="this.oldIndex = this.selectedIndex" onChange="if(!confirm('Are you sure?'))this.selectedIndex = this.oldIndex">

Answer 6

简单地做

$("#dropdown").change(function () {
    var success = confirm('Are you sure want to change the Dropdown ????');
    if (success == true) {
        // do something                  
    }
    else {
        return false; // will set the value to previous selected
    }
}); 

Answer 7

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

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

当然可以进行优化，但这是大体思路。