使用 jQuery 回滚 SELECT 更改答案

【问题标题】：Rollback SELECT change with jQuery使用 jQuery 回滚 SELECT 更改
【发布时间】：2012-08-28 22:30:44
【问题描述】：

我希望用户能够确认他们在选择控件中所做的选择，或者在他们取消时回滚到之前的值。以下在 Chrome/Safari 中运行良好，但无论我尝试什么，我都无法让它在 Firefox（在 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);
    }
});

小提琴： http://jsfiddle.net/yxzqY/13/

问题可以证明如下：

选择“经理”
点击“取消”（选定值 =“助手”）
再次选择“经理”
点击“取消”（所选值 = 'Assistant'在 Chrome 中，所选值 = 'Manager'在 FireFox 中)

我只是被难住了——不知道如何在 Firefox 中使用它，或者如何解决跨浏览器的差异行为。

【问题讨论】：

我在 Mac 中使用 FireFox 12。这个对我有用。也许您使用的是其他版本？
我在 mac 上相同 - 12。这样就可以反复更改和取消，一切正常？
哦，对不起，我的错。您第二次遇到问题。让我看看……

标签： javascript jquery firefox select cross-browser

【解决方案1】：

为什么需要focus 事件？我认为 Firefox 的问题在于，当您在实际 change 事件之前从下拉菜单中选择元素时，focus 事件也会触发。

我认为您不需要使代码过于复杂。尝试将focus 事件更改为数据值的默认初始化。像这样的：

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

它应该可以正常工作。

演示： http://jsfiddle.net/yxzqY/17/

【讨论】：

@VisioN- 你说得完全正确- 这更聪明，因为我跳过的障碍源于焦点问题。谢谢-

【解决方案2】：

确定了一个解决方案，如果不是确切的原因 - 该问题与当控件通过多个选择保持焦点时 Firefox 的行为有关 - 如果您在选择后删除焦点，它将正常运行。

答案是在更改处理程序的末尾添加$(this).blur();。

http://jsfiddle.net/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();
});

【讨论】：