4

我希望用户能够确认他们在选择控件中所做的选择，或者如果他们取消则回滚到以前的值。以下在 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 中使用它，或者如何解决跨浏览器的差异行为。

4

2 回答 2

10

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

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

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

它应该可以正常工作。

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

于 2012-05-23T20:23:03.067 回答
1

确定了一个解决方案，如果不是确切的原因 - 当控件通过多项选择保持焦点时，该问题与 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();
});
于 2012-05-23T20:16:28.990 回答