[JavaScript] Comment déselectionner tous les éléments d'un select multiple ? [FAQ]

Bovino · 28/09/2012, 19h04

Citation:

Envoyé par Question

Comment déselectionner tous les éléments d'un select multiple ?

Citation:

Envoyé par Réponse

Il n'est pas possible de le faire directement en attribuant une valeur à -1 à l'objet select. Malheureusement, cela ne fonctionne pas...
Une autre idée serait d'itérer sur tous les éléments du select pour les désélectionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for(var i = 0; i < oSelect.length; i++){
    oSelect.options[i].selected = false;
}

Cette solution fonctionne, mais n'est pas optimale car l'itération se fait aussi sur les options non sélectionnées et le traitement n'est pas optimisé.
On peut alors penser à ne faire l'itération que sur les options sélectionnées à l'aide du boucle while et de la propriété selectedIndex qui retourne l'index de la première option sélectionnée ou -1 si aucun option ne l'est.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function deselect(oSelect){
    while(oSelect.selectedIndex > -1){
        oSelect.options[oSelect.selectedIndex].selected = false;
    }
}

Cette façon de procéder est efficace et produit le résultat attendu, cependant, selectedIndex est une propriété de type read / write, ce qui signifie que l'on peut lui affecter une valeur. La solution la plus efficace sera donc d'affecter à selectedIndex la valeur -1 pour désélectionner toutes les options :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function deselect(oSelect){
    oSelect.selectedIndex = -1;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Select multiple</title>
	</head>
	<body>
		<select id="multi" multiple="multiple" size="10">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
		</select>
		<input type="button" onclick="document.getElementById('multi').selectedIndex = -1" value="Désélectionner" />
	</body>
</html>

vermine · 29/09/2012, 10h07

J'essaie de regarder ça dans les jours qui viennent.

d'avoir remonté l'info ici.

vermine · 01/10/2012, 10h49

C'est en ligne.

29/09/2012, 10h07	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 993 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 993 Points : 27 537 Points : 27 537	J'essaie de regarder ça dans les jours qui viennent. d'avoir remonté l'info ici. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

01/10/2012, 10h49	#3
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 993 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 993 Points : 27 537 Points : 27 537	C'est en ligne. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email