Rollback SELECT change with jQuery

Rollback SELECT change with jQuery

本文关键字：jQuery with change SELECT Rollback      更新时间：2023-09-26

我希望用户能够确认他们在选择控件中所做的选择，或者在取消时回滚到以前的值。以下内容在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/

该问题可以演示如下：

  1. 选择"经理"
  2. 单击"取消"（所选值 = "助手"）
  3. 再次选择"经理"
  4. 点击"取消"（在Chrome中所选值="助手"，在FireFox中选择值="管理器"）

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

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

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

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

它应该工作正常。

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

好的想出了一个解决方案，如果不是确切的原因 - 该问题与 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();
});
相关文章：