javascript - Rollback SELECT change with jQuery - Stack Overflow

I want a user to be able to confirm a selection they make in a select control, or to rollback to the previous value if they cancel. The following works fine in Chrome/Safari, but no matter what I try, I can't get it to work in Firefox (on Mac).

HTML:

<select id='my-select'>
<option value="client">Client</option>
<option selected="selected" value="assistant">Assistant</option>
<option value="manager">Manager</option>
</select>

JS:

$('#my-select').focus(function() {
    //Store old value
    $(this).data('lastValue',$(this).val());
});
$('#my-select').change(function(e) {

    var lastRole = $(this).data('lastValue');
    var newRole = $(this).val();

    if(confirm("Change user's role from "+lastRole+" to "+newRole+"?"))
    {
        // The control may remain in focus, so we update lastValue here: 
       $(this).data('lastValue',newRole);

        // Do stuff
    }
    else {
        $(this).val(lastRole);
    }
});​

Fiddle: /

---

The issue can be demonstrated as follows:

1. Select 'Manager'
2. Click 'Cancel' (Selected value = 'Assistant')
3. Select 'Manager' again
4. Click 'Cancel' (Selected value = 'Assistant' in Chrome, Selected value = 'Manager' in FireFox)

I'm just stumped- no idea how to get this working in Firefox, or how to resolve the diff behavior across browsers.

I want a user to be able to confirm a selection they make in a select control, or to rollback to the previous value if they cancel. The following works fine in Chrome/Safari, but no matter what I try, I can't get it to work in Firefox (on Mac).

HTML:

<select id='my-select'>
<option value="client">Client</option>
<option selected="selected" value="assistant">Assistant</option>
<option value="manager">Manager</option>
</select>

JS:

$('#my-select').focus(function() {
    //Store old value
    $(this).data('lastValue',$(this).val());
});
$('#my-select').change(function(e) {

    var lastRole = $(this).data('lastValue');
    var newRole = $(this).val();

    if(confirm("Change user's role from "+lastRole+" to "+newRole+"?"))
    {
        // The control may remain in focus, so we update lastValue here: 
       $(this).data('lastValue',newRole);

        // Do stuff
    }
    else {
        $(this).val(lastRole);
    }
});​

Fiddle: http://jsfiddle/yxzqY/13/

---

The issue can be demonstrated as follows:

1. Select 'Manager'
2. Click 'Cancel' (Selected value = 'Assistant')
3. Select 'Manager' again
4. Click 'Cancel' (Selected value = 'Assistant' in Chrome, Selected value = 'Manager' in FireFox)

I'm just stumped- no idea how to get this working in Firefox, or how to resolve the diff behavior across browsers.

• javascript
• jquery
• firefox
• select
• cross-browser

Share Follow edited Aug 28, 2012 at 14:30 Timo Tijhof 10.3k66 gold badges3737 silver badges5353 bronze badges asked May 23, 2012 at 19:52 YarinYarin 184k155155 gold badges410410 silver badges524524 bronze badges 3

• Am using FireFox 12 in a Mac. It works for me. Maybe you are using a different version? – FelipeDev.- Commented May 23, 2012 at 20:01
• I'm on same- 12 on mac. So you can change and cancel repeatedly, and everything works properly? – Yarin Commented May 23, 2012 at 20:06
• Oh, sorry, my fault. You are getting problems on the second time. Let me see... – FelipeDev.- Commented May 23, 2012 at 20:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Why do you need focus event? I think the problem with Firefox is that focus event fires also when you choose element from the dropdown menu before actual change event.

I think you do not need to overplicate your code. Try to change focus event to default initialization of data value. Something like this:

$('#my-select').each(function() {
    $(this).data('lastValue', $(this).val());
});

And it should work fine.

DEMO: http://jsfiddle/yxzqY/17/

OK figured out a solution, if not the exact cause- The issue has something to do with how Firefox behaves when the control keeps focus through multiple selections- If you remove focus post-selection, it will behave properly.

The answer is to add $(this).blur(); at the end of the change handler.

http://jsfiddle/yxzqY/16/

$('#my-select').focus(function() {
    //Store old value
    $(this).data('lastValue',$(this).val());
});
$('#my-select').change(function(e) {

    var lastRole = $(this).data('lastValue');
    var newRole = $(this).val();

    if(confirm("Change user's role from "+lastRole+" to "+newRole+"?"))
    {
        // Do stuff
    }
    else {
        $(this).val(lastRole);
    }
    // IMPORTANT!: Firefox will not act properly without this:
    $(this).blur();
});