Firefox ignoriert die Option selected = "selected"

112

Wenn Sie ein Dropdown-Menü ändern und die Seite aktualisieren, scheint Firefox das ausgewählte Attribut zu ignorieren.

<option selected="selected" value="Test">Test</option>

Tatsächlich wird die Option ausgewählt, die Sie zuvor ausgewählt haben (vor der Aktualisierung). Dies ist ein Problem für mich, da in der Dropdown-Liste ein Ereignis ausgelöst wird, das andere Dinge ändert. Gibt es eine Möglichkeit, Firefox dazu zu bringen, dieses Verhalten zu stoppen (außer ein anderes Ereignis auszulösen, wenn die Seite geladen wird)?

Schraubenschlüssel
quelle
Ich $('option:selected').each(function(){ $(this).prop('selected',true); });
stehe
Mir ist aufgefallen, dass dies nur bei ausgewählten Elementen passiert, denen ein
Namensattribut
3
versuchen Sie autocomplete = "off"
hemanjosko

Antworten:

5

AFAIK, dieses Verhalten ist in Firefox fest codiert.

Sie können versuchen, jedes Formularelement defaultValueauf das Laden auf der Seite einzustellen.

Pekka
quelle
1
Gibt es eine einfache Möglichkeit, dies für alle Elemente innerhalb des Formulars zu tun?
Schraubenschlüssel
@monkey mit jQuery sollte es so etwas wie $(":input").val(this[0].defaultValue);(ungetestet) sein; in normalen JS gehen Sie durch jedendocument.getElementsByTagname("select")
Pekka
Obwohl dies möglicherweise nicht die ideale Lösung ist, funktioniert dies. Sie müssen getAttribute ("ausgewählt") überprüfen
Schraubenschlüssel
8
Zu Ihrer
Information
281

Fügen Sie autocomplete="off"jedem ausgewählten Tag ein HTML-Attribut hinzu. (Quelle: https://stackoverflow.com/a/8258154/260080 )

Dies behebt das ODD-Verhalten in FireFox.

Marco Demaio
quelle
7
Dies ist meine Präferenz (vielen Dank, Marco und Schraubenschlüssel, haben dort ein paar Haarbüschel gerettet). Außerdem müssen Sie es jedem <Eingang> mit einem Attribut "Wert" oder "Aktiviert" und jedem <Textbereich> mit Inhalt hinzufügen.
Swanny
22
Dies sollte definitiv die richtige Antwort sein. Klappt wunderbar.
Andrew Senner
1
Dies ist kein W3C gültig
Jose De Gouveia
1
Ich hatte das gleiche Problem unter Windows, Firefox Version 44.0 (2016-Jan). Und diese Lösung funktioniert immer noch.
Steven
1
Funktioniert wie ein Zauber auf Firefox 47.0.
Blackecho
72

In Firefox ist mir aufgefallen, dass das Attribut "ausgewählt" nur funktioniert, wenn Sie die Auswahl in einem Formular platzieren, in dem das Formular ein Namensattribut hat.

user1707970
quelle
3
BAM! Das hat es behoben, wo Autocomplete = "off" dies nicht tat.
little_birdie
Verbrachte eine Stunde damit, mir mit Firefox 78.0.2 den Kopf zu kratzen. Ich brauchte keinen Namen auf meinem Formular, aber es gab Erleichterung, wenn ich ihm einen gab.
Betakilo
11

Hatte gerade das gleiche Problem, glauben Sie mir, es waren mehr als 10 Stunden, die mit diesem dummen Firefox-Verhalten zu kämpfen hatten. Ich habe 7 Dropdowns, von denen jeder ein Ereignis auslöst und 24 versteckte Eingaben ausfüllt, sodass Sie sich vorstellen können, die richtige Option ausgewählt zu haben 24 falsche Eingabewerte !!! Die Lösung, die ich schließlich gefunden habe, besteht darin, das Formular mit Javascript zurückzusetzen und diese Codezeile hinzuzufügen:

window.onload = function() { document.forms['MarkerForm'].reset(); };

PS: Die Eingaben haben die Werte aus einer Datenbank abgerufen, so dass beim Zurücksetzen des Formulars kein Wert leer wird, sondern Firefox in gewisser Weise angewiesen wird, zur ausgewählten Option = ausgewählt zurückzukehren!

Abdelkader Soudani
quelle
Dies ist die richtige Antwort. Die Antworten zur Verwendung von "Autocomplete" für ein ausgewähltes Element sind falsch, da "Autocomplete" KEIN gültiges Attribut für ein Auswahlfeld gemäß W3 ist und "Attribut-Autocomplete für Elementauswahl zu diesem Zeitpunkt nicht zulässig" verursacht. Fehler bei der Validierung.
Scott
5

Versuchen Sie, das autocompleteAttribut der Auswahleingabe zu deaktivieren. Manchmal ignoriert selectder Browser dies

Arash Hatami
quelle
3

Ich benutze FF 25.0.1

Es ignoriert selected=""und selected="selected".

Aber wenn ich es einfach versuche, ist selecteddie Option ausgewählt.

Seltsames (nicht konformes) Verhalten. Ich weiß selected, dass HTML5 gültig ist und es die kürzeste Form ist, aber ich schreibe normalerweise Code, der auch als gut geformtes XML validiert, sodass ich jedes XML-Validierungswerkzeug verwenden kann, um meine Ergebnisse auf sehr strenge Weise zu überprüfen (und der Datenaustausch ist sehr einfach.). .)

Laut W3C sollten diese Varianten für boolesche Attribute gültig sein:

HTML5:  boolAttr="" | boolAttr="boolAttr" | boolAttr
XHTML5: boolAttr="" | boolAttr="boolAttr"

Ich bevorzuge die erste, da sie fast so kurz ist wie die letzte (nicht xml-konforme) Variante, sollte aber sowohl als XHTML5 als auch als HTML5 validiert werden. Also hoffe ich, Mozilla wird es reparieren!

Michael
quelle
3

Verwenden Sie .prop () anstelle von .attr ()

This does not work in firefox.
  $( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
use this one
  $( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

In other way
  $( this ).prop( 'selected', 'selected' );
Zaheer Babar
quelle
Die Verwendung von .prop('selected', true);oder .prop('selected', false);(jQuery) zum Aktivieren / Deaktivieren funktioniert sowohl für Firefox als auch für Chrome.
JimB
2

Sie können .reset()das Formular aufrufen , bevor Sie die Seite aktualisieren.

Neil
quelle
2

Schließen Sie select in form attribute ein und es wird funktionieren.

<!-- will not work in firefox -->
<option selected="selected" value="Test">Test</option>

und

<!-- this will work in firefox -->
<form>
 <option selected="selected" value="Test">Test</option>
</form>
Muhammad Tahir
quelle
2

Mit dem Namen ist besser = >>

form id="UMForm" name="UMForm" class="form"

Die Auswahl übernimmt das ausgewählte Attribut

snk
quelle
1

Es ist vielleicht ein Fehler in Mozilla, aber versuchen Sie, dem Dropdown einen Namen zu geben.

Zweiundvierzig
quelle
1

Autocomplete funktionierte auch bei mir nicht.

Dies ist das in jquery geschriebene Javscript-Update, das ich verwende:

$('input[type="radio"][selected]').click();
Danny van der Knaap
quelle
1
<option selected="selected" value="Test">Test</option>

In diesem Fall funktionierte dies sowohl für Chrome als auch für Firefox.

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

Ich benutzte .attr()statt.prop()

AndreL
quelle
1

Verwenden Sie, um das erste Element der Dropdown-Liste anzuzeigen ProjectName.ClearSelection();

Fügen Sie Linien in Ihre Design-Seite ein, damit sie in allen Browsern funktionieren. Fügen Sie diese auch beim Laden der Seite in den Code ein.

$(document).ready(function () {
    $("#content_ProjectName option[value='1']").prop("selected", true);
});
Chinmaya
quelle
0

Wenn Sie die Auswahl ändern und die Seite aktualisieren, stellt Firefox Ihre Änderungen im Formular wieder her. Aus diesem Grund haben Sie das Gefühl, dass die Auswahl nicht funktioniert. Versuchen Sie, den Link auf einer neuen Registerkarte zu öffnen, anstatt ihn zu aktualisieren.

Rodrigo
quelle
Dies ist wahr, scheint jedoch mein Problem nicht zu lösen. Ich muss noch umgangen werden, da mein Onchange-Ereignis nicht ausgelöst wird, wenn Firefox beim Aktualisieren Änderungen am Formular wiederherstellt.
Schraubenschlüssel
0

Das ist meine Lösung:

var select = document.getElementById('my_select');
for(var i=0; i < select.options.length; i++){
    select.options[i].selected = select.options[i].attributes.selected != undefined;
}

Ich habe das einfach oben auf die Seite gesetzt (mit der entsprechenden ID), und es funktioniert für mich. Wenn ich die getElementById durch eine Schleife über alle Auswahlen auf der Seite ersetze, überlasse ich dies dem Leser als Übung;).

Benubird
quelle
0

Für mich hat keine der oben genannten Lösungen funktioniert. Ich musste die Auswahl explizit festlegen, wenn keine festgelegt wurde:

if (foo.find(':selected').length === 0) {
    $(foo.find('option')[0]).attr('selected', 'selected');
}

Ich wünschte, Firefox würde dies beheben :(

verpackt
quelle
0

Bei der Arbeit habe ich gerade einen Fehler behoben, bei dem die Auswahlfeldoption in Chrome, jedoch nicht in Firefox, auf derselben Webseite ordnungsgemäß angezeigt wurde. Es stellte sich heraus, dass es etwas völlig anderes war als die oben genannten Probleme, aber möglicherweise ein Problem, das Sie haben.

In Chrome war die Schriftfarbe des Auswahlfelds schwarz. Aus irgendeinem Grund hat das Auswahlfeld in Firefox die Schriftfarbe von dem Container geerbt, der weiß war. Nachdem ich eine CSS-Regel hinzugefügt hatte, um zu erzwingen, dass die Schriftfarbe des Auswahlfelds schwarz ist, wurde der eingestellte Wert ordnungsgemäß angezeigt.

Stefan Musarra
quelle
0

Weder autocomplete="off"noch es in ein formWerk zu legen, funktioniert für mich.

Was funktionierte, war, nur das Attribut zu verwenden, das ohne "Wert" wie folgt ausgewählt wurde :

<option @(Model.Source == TermSource.Instagram ? "selected" : "")>
    Instagram
</option>
<option @(Model.Source == TermSource.Facebook ? "selected" : "")>
    Facebook
</option>

also entweder rendert es <option selected>...</option>oder nur<option>...</option>

uggeh
quelle