La meilleure façon 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, à l'aide de jQuery, de désélectionner élégamment l'option?

Utilisez removeAttr ...

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

Ou Prop

$("option:selected").prop("selected", false)

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

@coffeeyesplease mentionne correctement qu'une bonne solution multi-navigateur 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 auto-test ici . Testé sur IE 7/8/9, FF 11, Chrome 19.

Cela fait un moment qu'on ne m'a pas demandé, et je n'ai pas testé cela sur des navigateurs plus anciens mais il me semble qu'une réponse beaucoup plus simple

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

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

Méthode la plus simple

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

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

Je suis sur jQuery 1.7.1 .

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

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

Ceci est expliqué dans le post lié par flyfishr64. Si vous le regardez, vous verrez comment il y a 2 cas - multi / non multi. Rien ne vous empêche de chanter les deux pour une solution complète:

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

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

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

Cela parcourrait chaque élément et désélectionnerait uniquement ceux qui sont cochés

Un rapide google a trouvé ce post qui décrit comment faire ce que vous voulez pour les listes de sélection simples et multiples dans IE. La solution semble également assez élégante:

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

}); 

$("#select_id option:selected").prop("selected", false);

$(option).removeAttr('selected') //replace 'option' with selected option's selector

Merci beaucoup pour la solution.

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

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

$("option:selected").attr("selected", false);

Un autre moyen simple:

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

Habituellement, lorsque j'utilise un menu de sélection, chaque option a une valeur qui lui est associée. 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.

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

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