Comment déselectionner tous les éléments d'un select multiple ?
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:
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:
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:
1
2
3
| function deselect(oSelect){
oSelect.selectedIndex = -1;
} |
Code:
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> |
