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

**Bovino** · 28/09/2012, 19h04

Envoyé par Question

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

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>