Firefox ignore l'option sélectionnée = "sélectionnée"

112

Si vous modifiez une liste déroulante et actualisez la page, Firefox semble ignorer l'attribut sélectionné.

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

Il sélectionnera en fait l'option que vous aviez précédemment sélectionnée (avant l'actualisation). Cela finit par être un problème pour moi car il y a un événement déclenché sur la liste déroulante qui change d'autres choses. Existe-t-il un moyen pour que Firefox arrête ce comportement (autre que le déclenchement d'un autre événement lorsque la page se charge)?

Clé anglaise
la source
Je $('option:selected').each(function(){ $(this).prop('selected',true); });
fais
J'ai remarqué que cela n'arrive que pour sélectionner les éléments qui n'ont pas d'attribut de nom
Tlacaelel Ramon Luis
3
try autocomplete = "off"
hemanjosko

Réponses:

5

AFAIK, ce comportement est codé en dur dans Firefox.

Vous pouvez essayer de définir chaque élément de formulaire sur son defaultValuechargement à la page.

Pekka
la source
1
Existe-t-il un moyen facile de le faire pour tous les éléments du formulaire?
monkey-wrench
@monkey en utilisant jQuery, cela devrait être quelque chose comme $(":input").val(this[0].defaultValue);(non testé); en JS normal, marchez chacundocument.getElementsByTagname("select")
Pekka
Bien que ce ne soit peut-être pas la solution idéale, cela fonctionne .. vous devez faire une vérification sur getAttribute ("selected")
monkey-wrench
8
FYI - Il y a une bien meilleure réponse ci-dessous par Marco Demaio
jonlink
281

Ajoutez un autocomplete="off"attribut HTML à chaque balise de sélection. (source: https://stackoverflow.com/a/8258154/260080 )

Cela corrige le comportement ODD dans FireFox.

Marco Demaio
la source
7
C'est ma préférence (merci beaucoup Marco et monkey-wrench, j'ai sauvé quelques touffes de mes cheveux là-bas). Et vous devrez également l'ajouter à chaque <input> avec un attribut "valeur" ou "vérifié", et à toute <textarea> avec un contenu.
Swanny
22
Cela devrait certainement être la bonne réponse. Fonctionne comme un charme.
Andrew Senner
1
ce n'est pas un w3c valide
Jose De Gouveia
1
J'ai eu le même problème sur Windows, Firefox ver 44.0 (2016-janvier). Et cette solution fonctionne toujours.
Steven le
1
Fonctionne comme un charme sur Firefox 47.0.
Blackecho
72

Dans Firefox, j'ai remarqué que l'attribut "selected" ne fonctionnera que si vous placez le select dans un formulaire, où le formulaire a un attribut de nom.

user1707970
la source
3
BAM! Cela l'a corrigé là où autocomplete = "off" ne le faisait pas.
little_birdie
J'ai passé une heure à me gratter la tête avec Firefox 78.0.2. Je n'avais pas besoin d'un nom sur mon formulaire, mais lui donner un soulagement.
betakilo
11

Je viens d'avoir le même problème, croyez-moi, cela fait plus de 10 heures de lutte avec ce comportement stupide de Firefox, j'ai 7 listes déroulantes, chacune d'entre elles déclenchera un événement et remplira 24 entrées cachées, vous pouvez donc imaginer avoir la bonne option sélectionnée avec 24 mauvaises valeurs d'entrée !!! la solution que j'ai finalement trouvée est de réinitialiser le formulaire avec Javascript en ajoutant cette ligne de code:

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

PS: les entrées ont les valeurs extraites d'une base de données, donc la réinitialisation du formulaire ne vide aucune valeur mais indique en quelque sorte à Firefox de retourner l'enfer à l'option selected = selected!

Abdelkader Soudani
la source
C'est la bonne réponse. Les réponses indiquant d'utiliser "autocomplete" sur un élément de sélection sont fausses car "autocomplete" n'est PAS un attribut valide pour un champ de sélection selon W3 et provoquera "La saisie semi-automatique d'attribut n'est pas autorisée sur l'élément sélectionné à ce stade." erreurs lors de la validation.
Scott
5

Essayez de désactiver l' autocompleteattribut de l'entrée sélectionnée ... parfois le navigateur ignore à selectcause de cela

Arash Hatami
la source
3

J'utilise FF 25.0.1

Il ignore selected=""et selected="selected".

Mais si j'essaye simplement, selectedl'option est sélectionnée.

Comportement étrange (non conforme). Je sais selectedque le HTML5 est valide et que c'est la forme la plus courte, mais j'écris généralement du code qui valide également un XML bien formé, de sorte que je puisse utiliser n'importe quel outil de validation XML pour vérifier mes résultats de manière très stricte (et l'échange de données est très facile.) .)

Selon le W3C, ces variantes doivent être valides sur les attributs booléens:

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

Je préfère la première, car elle est presque aussi courte que la dernière variante (non conforme au xml), mais devrait valider à la fois XHTML5 ET HTML5. J'espère donc que Mozilla le réparera!

Michael
la source
3

utilisez .prop () au lieu de .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
la source
L'utilisation de .prop('selected', true);ou .prop('selected', false);(jQuery) pour activer / désactiver fonctionne à la fois pour Firefox et Chrome.
JimB
2

Vous pouvez appeler .reset()le formulaire avant d'actualiser la page.

Neil
la source
2

entourez sélectionnez dans l'attribut de formulaire et cela fonctionnera.

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

et

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

Avec le nom c'est mieux = >>

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

La sélection prendra l'attribut sélectionné

snk
la source
1

C'est peut-être un bogue dans Mozilla mais essayez de donner un nom à la liste déroulante.

Quarante deux
la source
1

la saisie semi-automatique ne fonctionnait pas non plus pour moi.

C'est le correctif javscript écrit en jquery que j'utilise:

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

Dans ce cas, cela a fonctionné à la fois pour Chrome et Firefox.

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

J'utilisais .attr()au lieu de.prop()

AndreL
la source
1

Pour afficher le premier élément de la liste déroulante, utilisez ProjectName.ClearSelection();

Mettez des lignes dans votre page de conception pour fonctionner sur tous les navigateurs Et mettez également cela sur le code derrière le chargement de la page.

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

Si vous modifiez la sélection et actualisez la page, Firefox restaurera vos modifications sur le formulaire, c'est pourquoi vous avez l'impression que la sélection ne fonctionne pas. Au lieu d'actualiser, essayez d'ouvrir le lien dans un nouvel onglet.

Rodrigo
la source
Cela est vrai, mais ne semble pas résoudre mon problème. J'ai encore besoin d'une solution car mon événement onchange ne se déclenche pas lorsque Firefox restaure les modifications apportées au formulaire lorsque je fais une actualisation.
monkey-wrench
0

Voici ma solution:

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;
}

Je viens de le mettre en haut de la page (avec le jeu d'identifiants approprié), et cela fonctionne pour moi. En remplaçant le getElementById par une boucle sur toutes les sélections de la page, je laisse comme exercice pour le lecteur;).

Benubird
la source
0

Pour moi, aucune des solutions ci-dessus n'a fonctionné. J'ai dû définir explicitement la sélection si aucune n'était définie:

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

Je souhaite que Firefox corrige ce problème :(

en boîte
la source
0

Au travail, je viens de corriger un bug où l'option de la boîte de sélection s'affichait correctement dans Chrome mais pas dans Firefox, sur la même page Web. Il s'est avéré être quelque chose de complètement différent des problèmes ci-dessus, mais cela pourrait probablement être un problème que vous rencontrez.

Dans Chrome, la couleur de la police de la boîte de sélection était noire. Pour une raison quelconque dans Firefox, la boîte de sélection a hérité de la couleur de la police du conteneur, qui était blanche. Une fois que j'ai ajouté une règle CSS pour forcer la couleur de la police de la boîte de sélection à être noire, l'ensemble de valeurs était correctement affiché.

Stefan Musarra
la source
0

Ni l'un autocomplete="off"ni l' autre, ni le placer dans un ne formfonctionne pour moi.

Ce qui fonctionnait, c'était de n'utiliser que l'attribut sélectionné sans "valeur" comme ceci:

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

alors soit ça rend <option selected>...</option>, soit juste<option>...</option>

uggeh
la source