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.