Warum zeigt Firefox nicht die richtige Standardauswahloption an?

Question

Ich entwickle eine Webanwendung zur Verwaltung von SKUS-Produkten. Ein Teil davon ist es, SKUs mit Produktnamen zu verknüpfen. In jeder Zeile einer Tabelle liste ich eine SKU auf und zeige eine <select> Box mit Produktnamen. Das Produkt, das derzeit mit dieser SKU in der Datenbank verknüpft ist, erhält ein Attribut wie selected="selected" . Diese kann über AJAX geändert und aktualisiert werden.

Es gibt eine Los des Produkts <option> s - 103 um genau zu sein - und diese Liste wird in der <select> in jeder Zeile.

Von einem anderen Eingang auf der Seite verwende ich jQuery AJAX-Anfragen, um neue SKU/Produkt-Zuordnungen hinzuzufügen, und um deutlich zu machen, dass sie sofort hinzugefügt werden, füge ich sie in die top des Tisches mit einem kleinen Highlight-Effekt. Wenn die Anzahl der SKUs über 10 oder so ansteigt und ich die Seite aktualisiere (was alles wieder aus der Datenbank lädt, geordnet nach Produktnamen), beginnt Firefox, einige falsche Optionen als standardmäßig ausgewählt anzuzeigen. Es ist nicht konsistent, welche falsche Option angezeigt wird, aber es scheint die Optionen zu verwechseln, die vor dem Neuladen der Seite vorhanden waren.

Wenn ich die <select> mit Firebug, die select="selected" ist auf der richtigen <option> Tag. Wenn Sie die Seite aktualisieren (oder die Seite verlassen und die URL dieser Seite erneut eingeben), wird sie nicht korrekt angezeigt, sondern hartes Auffrischen (Strg+F5) bewirkt .

Sowohl Chrome als auch IE7 zeigen dies von vornherein korrekt an.

Meine Theorie ist, dass dies eine Folge einer fehlerhaften Cache-Strategie von Firefox ist. Hört sich das richtig an? Gibt es eine Möglichkeit, in meinem Code zu sagen: "Wenn diese Seite aktualisiert wird, mache es zu einer harten Aktualisierung - lade alles von Grund auf neu?"

Update

Um dieses Problem zu lösen, habe ich meine Strategie geändert.

• Zuvor hatte ich eine <select> mit einer langen Liste von <option> s in jeder Tabellenzeile, wobei der aktuelle Wert als Standardwert festgelegt wird
• Jetzt lege ich den aktuellen Wert in einer <span> . Wenn der Benutzer auf eine Schaltfläche "Ändern" klickt, ersetze ich die <span> mit einer <select> und die Schaltfläche "Ändern" wird zu einer Schaltfläche "Bestätigen". Wenn sie die Optionen ändern und auf "Bestätigen" klicken, aktualisiert AJAX die Datenbank und die <select> geht zurück zu einem <span> , diesmal mit dem neuen Wert.

Dies hat zwei Vorteile:

• Sie behebt den oben beschriebenen Fehler
• Sie erfordert weit weniger DOM-Elemente auf der Seite (all diese überflüssigen <option> s)

Answer 1

Ich hatte ein ähnliches Problem, aber nach dem Hinzufügen von autocomplete="off" HTML-Attribut zu jedem Select-Tag hinzuzufügen, funktionierte es. (Ich habe Firefox 8 verwendet)

Answer 2

Firefox behält Ihre ausgewählten Formularelemente bei, wenn Sie aktualisieren. Das ist gewollt. Die Tastenkombination Strg+F5 ist eine "harte" Aktualisierung, die dieses Verhalten deaktiviert.

--

Oder Befehl+Umschalt+R, wenn Sie mit einem Mac arbeiten

Answer 3

Ein einfacher Weg, um zu verhindern, dass Firefox die zuletzt ausgewählte Option zwischenspeichert, besteht darin, alle Optionselemente beim Entladen der Seite zu entfernen. Zum Beispiel (jQuery vorausgesetzt):

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

Answer 4

Ich hatte das gleiche Problem. Ich habe versucht, den Wert der Auswahl zu ändern, je nachdem, welche Option selected="selected" hatte, aber Firefox hat nicht funktioniert. Es würde immer auf die erste Option zurückgreifen.

Chrome, Safari usw. funktionierten, als ich dies tat:

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

... aber das hat in FF nicht funktioniert.

Also habe ich es versucht:

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

und es funktioniert.

jQuery v1.9.1

Answer 5

Dies ist zwar eine alte Frage, aber die folgende Lösung kann jemandem helfen

In Firefox habe ich festgestellt, dass das Attribut "ausgewählt" nicht funktioniert, wenn Sie die Wählen Sie innerhalb einer Formular , wobei die Formular hat ein Attribut name .

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

Nochmals zur Erinnerung:

1. muss das Formular den Zusatz " Name "-Attribut und
2. " Wählen Sie " muss innerhalb des Formulars stehen.