jQuery - cancel change event on confirmation dialog for a Dropdown

I have a dropdown and I have the jQuery change function.

I woul开发者_Python百科d like to implement the change of the selected item as per the Confirmation dialog.

If confirms true i can proceed for selected change otherwise I have keep the existing item as selected and cancel the change event.

How can I implement this with jQuery?

jquery Function

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

One thing to remember change function hits only after selected item changed So better to think to implement this on onchange - but it is not available in jquery. Is there any method to implement this?

---

Well, as Vinu has rightly pointed out, jQuery's change event is only triggered once the value of the select has actually been changed. You would be better off doing something like this:

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

---

Something like what I did here?

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

Simply save the value as soon as a user clicks the select box, and revert back to this value if the onchange confirmation returns false.

Here is the code from my fiddle:

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

---

Use following code,I have tested it and its working

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

---

Below code is implemented for radio button.I think this code with minor changes can be used for drop down also.

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

---

As far as I know you have to handle it yourself, this might help:

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

---

Simply do it like

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

---

Blurring, focusing and storing previous values seems a bit cumbersome. I solved this problem by attaching my listener not to the select, but to the option:

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

then,

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

Of course optimizations can be done, but this is the general idea.