web-dev-qa-db-ja.com

Firefoxに正しいデフォルトの選択オプションが表示されないのはなぜですか？

製品SKUSを管理するWebアプリを作成しています。その一部は、SKUを製品名に関連付けることです。テーブルの各行にSKUをリストし、<select>ボックスに製品名を表示します。現在データベース内のそのSKUに関連付けられている製品には、selected="selected"などの属性が与えられます。これは、AJAXを介して変更および更新できます。

製品<option>s-（正確には103）のlotがあり、このリストは各行の<select>で繰り返されます。

ページの別の入力から、jQuery AJAXリクエストを使用して新しいSKU /製品の関連付けを追加し、それらが即座に追加されることを明確にするために、top少しハイライト効果があります。SKUの数が10を超えると、ページを更新すると（データベースからすべてが読み込まれます） Firefoxはデフォルトで選択されたいくつかの間違ったオプションを表示し始めます。どの間違ったオプションが表示されるかについては一貫していませんが、ページのリロード前に存在していたオプションを混同しているようです。

Firebugを使用して<select>を検査すると、select="selected"は正しい<option>タグにあります。ページを更新する（またはこのページのURLを残して入力して戻る）と、正しく表示されませんが、ハードリフレッシュ（Ctrl + F5）は。

両方のChromeとIE7は最初にこれを正しく表示します。

私の理論では、これはFirefoxの誤ったキャッシュ戦略の結果です。それは正しいですか？私のコードで「このページが更新されたら、ハード更新してください-すべてをゼロからリロードしますか？」と言う方法はありますか？

更新

この問題を解決するために、戦略を変更しました。

  • 以前は、各テーブル行に<select>sの長いリストを持つ<option>を配置し、現在の値をデフォルトとして設定しました
  • 次に、現在の値を<span>に入れます。ユーザーが「変更」ボタンをクリックすると、<span>が<select>に置き換えられ、[変更]ボタンが[確認]ボタンになります。オプションを変更して[確認]をクリックすると、AJAXはデータベースを更新し、<select>は<span>に戻ります。今回は新しい値を使用します。

これには2つの利点があります。

  • 上記のバグを修正します
  • 必要なfarページ上のDOM要素が少ない（これらすべての冗長<option>s）
firefoxselectcaching
67
Nathan Long

Firefoxは、更新時に選択したフォーム要素を保持します。意図的です。 Ctrl + F5は「ハード」リフレッシュであり、この動作を無効にします。

-

または、Macを使用している場合はCommand + Shift + R

45
Ted Mielczarek

同様の問題がありましたが、autocomplete="off" HTML属性をすべての選択タグに追加した後、機能しました。 [Firefox 8を使用していた]

101
BananaDeveloper

Firefoxが最後に選択したオプションをキャッシュしないようにする簡単な方法は、ページのアンロード時にすべてのオプション要素を削除することです。例（jQueryを想定）：

$(window).unload(function() {
  $('select option').remove();
});
14
ozu

これと同じ問題がありました。どのオプションがselected = "selected"であったかに応じてselectの値を変更しようとしましたが、Firefoxは動作していませんでした。常にデフォルトの最初のオプションになります。

私がこれをしたとき、Chrome、Safariなどが機能しました：

$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );

...しかし、これはFFでは機能していませんでした。

だから私は試しました：

$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

そしてそれは動作します。

jQuery v1.9.1

11
clint_milner

非表示の入力にautocomplete = "off"を設定することで機能します。

6
Alex

これは古い質問ですが、以下の解決策は誰かを助けることができます

Firefoxでは、selectを内に配置しない限り、「selected」属性が機能しないことに気付きました。 form、ここでformにはname属性があります。

<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>

もう一度覚えておいてください：

  1. フォームには「name」属性が必要です。
  2. 「select」はフォーム内にある必要があります。
5
Rakesh Soni

参考：ページのリロード後にFirefoxが以前に選択したオプションを復元しないようにするには、<form>オプションを含む<select>全体を<iframe>内に配置します。

選択ボックスが<iframe>にあり、コンテナページをリロードすると、Firefoxは最終的に選択オプションをリセットするだけで、他のすべてのブラウザと同様に動作します。

0
Marco Demaio

Firebugには、まさにこのシナリオのためのキャッシュ無効化機能があります。

より深い長期的な解決策は、キャッシュなしヘッダーをサーバー側に設定する方法を検討することです。どのWebサーバーを使用していますか？

0
lod3n

Firefoxで奇妙な選択オプションのバグが発生するたびに、選択済みとしてマークされた複数のオプションがあったためです。そのようにマークされているのは1つだけだと確信していますか？ AJAXでそれを変更する場合、かなり簡単にワックから抜け出すことができるようです。

0
Morinar

@BananaDeveloperに感謝（ https://stackoverflow.com/a/8258154/2182349 ）-これは、アプリケーションの単一ページでこの問題を解決するための私の解決策です

既製/オープンソースのアプリケーションコードをカスタマイズしたくなかった

<Files "page_that_does_not_work.php">
        SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE
        Substitute 's/<select/<select autocomplete="off"/n'
        Substitute 's/<form/<form novalidate/n'
</Files>

mod_substituteのApacheドキュメント https://httpd.Apache.org/docs/2.4/mod/mod_substitute.html

おかげで： https://serverfault.com/questions/843905/Apache-mod-substitute-works-in-curl-but-not-on-browser forSetOutputFilter

0
user2182349