web-dev-qa-db-fra.com

Le meilleur moyen de désélectionner un <select> dans jQuery?

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

Quelle est la meilleure façon, avec jQuery, de désélectionner élégamment l’option?

jqueryselect
206
user198729

Utilisez removeAttr ...

$("option:selected").removeAttr("selected");

Ou Prop

$("option:selected").prop("selected", false)
324
Ei Maung

Il y a beaucoup de réponses ici mais malheureusement, elles sont toutes assez anciennes et reposent donc sur attr/removeAttr qui n'est vraiment pas la voie à suivre.

@coffeeyesplease mentionne correctement qu’une bonne solution multi-navigateurs consiste à utiliser

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

Une autre bonne solution multi-navigateur est

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

Vous pouvez le voir exécuter un test automatique ici . Testé sur IE 7/8/9, 11 FF, Chrome 19.

151
Jon

Cela fait longtemps que je ne l’ai pas demandé, et je n’ai pas testé cela sur les anciens navigateurs, mais il me semble que la réponse est beaucoup plus simple:

$("#selectID").val([]);

.val () fonctionne aussi pour select http://api.jquery.com/val/

24
coffeeyesplease

Méthode la plus simple

$('select').val('')

J'ai simplement utilisé cela sur la sélection elle-même et il a fait l'affaire.

Je suis sur jQuery 1.7.1.

23
Joshua Pinter

Jusqu'à présent, les réponses ne fonctionnent que pour plusieurs sélections dans IE6/7; pour les non-multi-select plus courants, vous devez utiliser:

$("#selectID").attr('selectedIndex', '-1');

Ceci est expliqué dans le message lié à flyfishr64. Si vous le regardez, vous verrez comment il y a 2 cas - multi/non-multi. Rien ne vous empêche de choisir à la fois une solution complète:

$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
19
thetoolman

Oh jquery.

Puisqu'il existe encore une approche JavaScript native, je ressens le besoin d'en fournir une.

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

Et juste pour vous montrer à quel point c'est plus rapide: benchmark

7
Blaine Kasten

Un rapide Google trouvé cet article qui décrit comment faire ce que vous voulez pour les listes de sélection simples et multiples dans IE. La solution semble également très élégante:

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

});
5
Jeff Paquette
$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

Cela permettrait de parcourir chaque élément et de ne sélectionner que ceux qui sont cochés

5
DinoMyte
$(option).removeAttr('selected') //replace 'option' with selected option's selector
3
Brandon Henry

Merci beaucoup pour la solution.

La solution pour une liste à choix unique fonctionne parfaitement. J'ai trouvé cela après avoir cherché sur de nombreux sites.

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");
2
Madeswaran Govindan
$("option:selected").attr("selected", false);
2
Charlie Brown

Un autre moyen simple:

$("#selectedID")[0].selectedIndex = -1

2
Rafael

Habituellement, lorsque j'utilise un menu de sélection, chaque option est associée à une valeur. Par exemple

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

Maintenant, cela ne supprime pas l'attribut sélectionné de l'option mais tout ce que je veux vraiment, c'est la valeur.

1
jtaz

$ ("# option select_id: sélectionné"). prop ("sélectionné", faux);

0
premkumar

Définissez un identifiant dans votre sélection, comme:
<select id="foo" size="2">

Ensuite, vous pouvez utiliser:
$("#foo").prop("selectedIndex", 0).change();

0
TheAlphaGhost