Désélectionner des éléments du menu déroulant

**devlm** · 28/09/2012, 16h43

bonjour,

je cherche à désélectionner suite à une première recherche des éléments de mon menu déroulant.

voici le HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select id="sauf_id_familles[]" class="champs" multiple="multiple" size="4" name="sauf_id_familles[]">
<option value="4">AMPLIS INSTRUMENTS</option>
<option value="5">CLAVIERS</option>
<option selected="selected" value="15">CORDES</option>
<option selected="selected" value="9">DEPOT VENTE</option>
<option value="19">DIVERS/ACCESSOIRES</option>
<option value="17">ECLAIRAGE</option>
<option value="14">ECO CONTRIBUTION</option>
<option value="13">FRAIS/PORT</option>
</select>

Voici le javascript qui permet de faire le reset pour deselectionner des élements du menu deroulant seulement il ne marche pas.

Code :

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
function raz(){
	document.getElementById('id_magasin').value=<?php if($_SESSION['fonction']==1) { echo '0'; } else { echo $_SESSION['id_magasin']; } ?>;
	document.getElementById('sauf_id_familles[]').value=0;
	document.getElementById('comparateur').value=0;
	document.getElementById('motcle').value='';
	document.getElementById('date_debut').value='<?php echo date('d/m/Y') ?>';
	document.getElementById('date_fin').value='<?php echo date('d/m/Y') ?>';
	document.getElementById('qte').value=0;
	gofamille(0,0);
	gocommercial(0,0);
 
	var selObject=document.getElementById('sauf_id_familles[]');
	for (i=0;i<selObject.options.length;i++){
	selObject.options[i].selected=false;
	}	
 
 
 
}

Auriez-vous une solution si possible sans jquery.

Merci.

**Bovino** · 28/09/2012, 18h49

Pour désélectionner des éléments d'un select multiple, il faut itérer sur selectedIndex.

Code :

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
23
24
25
26
27
28
29
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Select multiple</title>
		<script>
			function deselect(oSelect){
				while(oSelect.selectedIndex > -1){
					oSelect.options[oSelect.selectedIndex].selected = false;
				}
			}
		</script>
	</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="deselect(document.getElementById('multi'))" value="Désélectionner" />
	</body>
</html>

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

Euh... en fait, il existe une solution plus simple :

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>