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

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

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

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

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

6 个答案: