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 に答える