web-dev-qa-db-fra.com

jquery supprimer l'attribut "sélectionné" de l'option?

Pourquoi cela ne fonctionne-t-il pas dans IE8 pour désélectionner toutes les options dans une boîte de sélection multiligne?

$("#myselect").children().removeAttr("selected");

Y at-il un travail autour? Rien à quoi je pouvais penser (attr ("sélectionné", "") etc.) ne semble pas fonctionner.

MISE À JOUR: Voici un jsFiddle mis à jour. J'ai au moins obtenu qu'il se dégrade de sorte que dans IE8 la première option soit sélectionnée . Mais sans le hardcoded selected = 'selected' et l'appel .attr dont IE8 semble avoir besoin, il fait 3 choses différentes dans Firefox, Chrome et IE8! Voir cette version: , ce qui est simple et semble fonctionner:

  • dans Firefox: rien sélectionné
  • dans Chrome: 0ème option sélectionnée
  • dans IE8: 1ère option sélectionnée

Peut-être que je me suis rendu fou et qu'il y a une erreur quelque part que je ne vois pas?

jqueryinternet-explorer
37
Don Zacharias

C'est quelque chose dans la façon dont jQuery se traduit en IE8, pas nécessairement le navigateur lui-même.

J'ai pu contourner le problème en allant à la vieille école et en sortant de jQuery pour une ligne:

document.getElementById('myselect').selectedIndex = -1;
22
radiak

La question est posée de manière trompeuse. "Supprimer l'attribut selected" et "désélectionner toutes les options" sont choses complètement différentes.

Pour désélectionner toutes les options de manière documentée et multi-navigateur, utilisez

$("select").val([]);

ou

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);
66
Jon

Cela marche:

$("#myselect").find('option').removeAttr("selected");

ou

$("#myselect").find('option:selected').removeAttr("selected");

jsFiddle

20
Gabe

Utilisation de jQuery 1.9 et supérieur:

$("#mySelect :selected").prop('selected', false);
10
Santosh

Similaire à la réponse de @ radiak, mais avec jQuery (voir ce document API et commenter la façon de changer le selectedIndex).

$('#mySelectParent').find("select").prop("selectedIndex",-1);

Les avantages de cette approche sont:

  • Vous pouvez rester dans jQuery
  • Vous pouvez limiter l'étendue à l'aide des sélecteurs jQuery (#mySelectParent dans l'exemple)
  • Code défini plus explicitement
  • Fonctionne dans IE8, Chrome, FF
2
JJ Zabkar

Eh bien, j'ai passé beaucoup de temps sur cette question. Pour obtenir une réponse fonctionnant avec Chrome ET IE, j'ai dû changer mon approche. L'idée est d'éviter de supprimer l'option sélectionnée (car ne peut pas la supprimer correctement avec IE). => Cela implique de sélectionnez l'option non pas en ajoutant ou en définissant l'attribut sélectionné sur l'option, mais en choisissant une option au niveau "select" à l'aide de l'accessoire selectedIndex.

Avant :

$('#myselect option:contains("value")').attr('selected','selected');
$('#myselect option:contains("value")').removeAttr('selected'); => KO with IE

Après :

$('#myselect').prop('selectedIndex', $('#myselect option:contains("value")').index());
$('#myselect').prop('selectedIndex','-1'); => OK with all browsers

J'espère que cela vous aidera

1
Pierre

Une autre alternative:

$('option:selected', $('#mySelectParent')).removeAttr("selected");

J'espère que ça aide

1
Eolia