Effacer toutes les options de plusieurs select?

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour ,

Je cherche en vint une solution pour supprimer toutes les options de plusieurs listes. Le code ci dessous fonctionne bien avec 2 listes mais dépassé 2 listes, ça ne marche plus.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <select name="liste1" id="1" onChange="document.getElementById('2').options.length=0;"> <option></option> <option>a</option> <option>b</option> <option>c</option> </select> <select name="liste2" id="2" onChange="document.getElementById('1').options.length=0;"> <option></option> <option>d</option> <option>e</option> <option>f</option> </select>
Un petit coup de pouce ne serait pas de refus svp.

Merci

Bonjour Tryan et bienvenue sur ce forum :)

J'ai fait un petit script qui je pense répond à tes attentes :

Code:

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
30
31
32
		<div id="options">
			<form>
				<select name="liste1" id="1" onChange="removeOptions(1)">
					<option></option>
					<option>a</option>
					<option>b</option>
					<option>c</option>
				</select>
				<select name="liste2" id="2" onChange="removeOptions(2)">
					<option></option>
					<option>d</option>
					<option>e</option>
					<option>f</option>
				</select>
				<select name="liste3" id="3" onChange="removeOptions(3)">
					<option></option>
					<option>d</option>
					<option>e</option>
					<option>f</option>
				</select>
			</form>
		</div>
		<script type="text/javascript">
			function removeOptions(divId){
				var optionsDiv = document.getElementById('options').getElementsByTagName("select");
				for (var i=0;i<optionsDiv.length;i++){
					if(optionsDiv[i].id != divId){
						optionsDiv[i].options.length=0;
					}
				}
			}
		</script>

Cela produit il l'effet désiré?
Si tu as un problème de compréhension au niveau de la syntaxe n'hésite pas à demander.

Dans l'attente de ta réponse je te souhaite une très agréable fin de journée,
Cdt,

Lenézé

Citation:
Envoyé par Lenézé
Bonjour Tryan et bienvenue sur ce forum :)

J'ai fait un petit script qui je pense répond à tes attentes :
Code:

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 30 31 32 <div id="options"> <form> <select name="liste1" id="1" onChange="removeOptions(1)"> <option></option> <option>a</option> <option>b</option> <option>c</option> </select> <select name="liste2" id="2" onChange="removeOptions(2)"> <option></option> <option>d</option> <option>e</option> <option>f</option> </select> <select name="liste3" id="3" onChange="removeOptions(3)"> <option></option> <option>d</option> <option>e</option> <option>f</option> </select> </form> </div> <script type="text/javascript"> function removeOptions(divId){ var optionsDiv = document.getElementById('options').getElementsByTagName("select"); for (var i=0;i<optionsDiv.length;i++){ if(optionsDiv[i].id != divId){ optionsDiv[i].options.length=0; } } } </script>
Cela produit il l'effet désiré?
Si tu as un problème de compréhension au niveau de la syntaxe n'hésite pas à demander.

Dans l'attente de ta réponse je te souhaite une très agréable fin de journée,
Cdt,

Lenézé
un id ne dois jamais commencer par un chiffre. Il doit obligatoirement y avoir une lettre avant.

Bonsoir et merci de votre réponse Lenézé :D .

Le script ne correspond pas réellement à ce dont je souhaite parvenir. Je souhaite pouvoir conserver le contenu des formulaires (<option>a</option>) lors de la sélection et ne conserver que le résultat du $_POST["***"], sinon dit le résultat du dernier formulaire sélectionné.

Concrètement, voici à quoi ressemble actuellement mon code.

J'utilise le script ci-dessous pour montrer/cacher diverses éléments et notamment des formulaires.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function afficheBoitedpt(num) { var maxBoitedpt = 23; // Indiquer ici le nombre maximale de boite possible for (var i = 1; i <= maxBoitedpt; i++) { var dpt = document.getElementById('dpt'+i); if (dpt) { if (i == num) { dpt.style.display = ''; } else { dpt.style.display = 'none'; } } } }
Ce code est associé au formulaires suivant, donc chaque sélection fait par le 1er formulaire ouvre ou ferme un 'div' différent
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <select name="categorie"> <option value="0">«Choisissez la catégorie»</option> <option value='1' onclick="afficheBoite(1);">+++</option> <option value='2' onclick="afficheBoite(2);">+++</option> <option value='3' onclick="afficheBoite(3);">+++</option> </select> <div id='boite1' style='display:none;'> <select name="departement1" id="1" onChange="document.getELementById('2').options.length=0;"> <option value="0">«Choisissez»</option> <option value="1" <?php if($departement1==1){echo "selected='selected'";}?>>++</option> <option value="2" <?php if($departement1==2){echo "selected='selected'";}?>>++</option> </select> </div> <div id='boite2' style='display:none;'> <select name="departement2" id="2" onChange="document.getELementById('1').options.length=0;"> <option value="0">«Choisissez»</option> <option value="1" <?php if($departement2==1){echo "selected='selected'";}?>>++</option> <option value="2" <?php if($departement2==2){echo "selected='selected'";}?>>++</option> </select> </div> 
A la suite, vient le traitement du formulaire :
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php if (isset($_POST["envoyer"])) { $departement1 = stripcslashes(htmlspecialchars($_POST["departement1"])); $departement2 = stripcslashes(htmlspecialchars($_POST["departement2"])); echo ''.$departement1.'<br/>'.$departement2.''; } ?>
En l'état actuelle et uniquement grâce à la fonction

Code:

onChange="document.getELementById('**').options.length=0;"

..et en fonction du "select" sélectionné, l'une des 2 variables devient vide.

Par contre, si j'ajoute un 3ieme formulaire, la fonction

Code:

onChange="document.getELementById('**').options.length=0;"

..devient obsolète et chaque variable me retourne alors un résultat (au lieu d'être vide) en fonction des "select" utilisés.

Pas facile à expliquer :oops: .

08/09/2010, 21h01
Lenézé

J'ai peine à comprendre mais on va y arriver :)

Récap + mise au point :
- Tu as un formulaire avec une option list
- La sélection d'une option rend une div visible
- Si le formulaire est envoyé, tu récupères les données des deux div qui peuvent devenir visibles
- Tu réceptionnes les infos ($_POST), les affiche et populate le même formulaire (sélection des données $_POST dans tes divs masquées)

A partir de là c'est le flou :(
Si l'utilisateur modifie le select tu effaces les données de la boite (alors masquée) correspondante.
Tu aimerai que le onChange efface les données d'un formulaire supplémentaire (ce que fait ma fonction)?

Citation:

..et en fonction du "select" sélectionné, l'une des 2 variables devient vide.

$departement1 et 2? Si le formulaire est re-envoyé, seule la variable sélectionnée est donc récupérée (OK).

Citation:

Par contre, si j'ajoute un 3ieme formulaire

Et donc la récupération d'une variable $departement3?

Citation:

devient obsolète et chaque variable me retourne alors un résultat

Le simple fait de rajouter un formulaire (une boite3) empêche les option list initiales de se vider?

Désolé de tout reprendre, ça n'est pas clair dans ma tête :)
J'aimerai cerner au mieux tes objectifs afin de t'apporter une réponse plus pertinente.

J'attends ta réponse,

Lenézé
08/09/2010, 21h19
SpaceFrog
un id ne doit pas être numérique ! ça peut poser des soucis sous IE
de plus pour vider un select de ses options:

Code:

obj.options.length=0

ou alors
Code:

1 2 3 while(obj.options[0]){ obj.removeChild(obj.ptions[0])}
09/09/2010, 08h29
tryan

Bonjour,

Citation:

Envoyé par SpaceFrog

un id ne doit pas être numérique ! ça peut poser des soucis sous IE

Le quelle exactement? Celui du select (name="departement1" id="1") ou du (onChange="document.getELementById('2')) ?

Sinon , je vous montre exemple pour mieux cerner mon soucis à cette adresse -http://loupantheres.free.fr . Remplissez et valider au moins 2 fois les champs (Département, catégorie Voitures puis catégorie Motos). Vous constaterez que mes variables gardes en mémoires le résultat des précédentes sélections au lieu de les passer à zéro ou vide et c'est ce qui me pose soucis.

En tout cas, merci de votre aide :)
09/09/2010, 08h34
SpaceFrog

id="1" est une mauvaise id :mouarf:

J'ai compris le problème :D

Ce qui me chagrine, c'est que le code correspondant fonctionne :

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  <meta http-equiv="Content-Language" content="fr" /> 
  <title>Petites annonces gratuites</title> 
  <meta name="Description" content="Déposez votre annonces gratuitement." /> 
 
  <script type="text/javascript" src="boite.js"></script> 
 
  <style> 
  label{
  display:inline;
  font-weight:bold;
  }
  select,input{
  margin:5px;
  }
  .espace{
  margin:0 10px 0 0;
  color:blue;
  font-weight:bold;
  }
  .couleur{
  color:green;
  }
  .erreur{
  color:red;
  border: 1px solid red;
  width:500px;
  height:auto;
  margin:5px;
  padding:5px;
  background-color:#FAB9AD;
  }
  </style> 
 
</head> 
 
<body> 
<?php
if(isset($_POST['envoyer'])){
echo $_POST['departement1'];
echo $_POST['departement2'];
echo $_POST['departement3'];
echo $_POST['departement4'];
echo $_POST['departement5'];
};
?>
 
 
 
<form name="listes" action="#ancre_formulaire" method="post"> 
<label>Région :</label> 
<select name="region" onchange="afficheBoitedpt(this.value);"> 
<option value="0">«Choisissez la région»</option> 
<option value="1">Alsace</option> 
<option value="2">Aquitaine</option> 
<option value="3">Auvergne</option> 
<option value="4">Basse-Normandie</option> 
<option value="5">Bourgogne</option> 
</select> 
<br/> 
 
<div id='dpt1' style='display:none;'><label>Département :</label> 
<select name="departement1"> 
<option value="0">«Choisissez»</option> 
<option value="1" >Bas-Rhin</option> 
<option value="2" >Haut-Rhin</option> 
</select>     
</div> 
 
<div id='dpt2' style='display:none;'><label>Département :</label> 
<select name="departement2"> 
<option value="0">«Choisissez»</option> 
<option value="3" >Dordogne</option> 
<option value="4" >Gironde</option> 
<option value="5" >Landes</option> 
<option value="6" >Lot-et-Garonne</option> 
<option value="7" >Pyr&eacute;n&eacute;es-Atlantiques</option> 
</select>     
</div> 
 
<div id='dpt3' style='display:none;'><label>Département :</label> 
<select name="departement3"> 
<option value="0">«Choisissez»</option> 
<option value="8" >Allier</option> 
<option value="9" >Cantal</option> 
<option value="10" >Haute-Loire</option> 
<option value="11" >Puy-de-d&ocirc;me</option> 
</select>     
</div> 
 
<div id='dpt4' style='display:none;'><label>Département :</label> 
<select name="departement4"> 
<option value="0">«Choisissez»</option> 
<option value="12" >Calvados</option> 
<option value="13" >Manche</option> 
<option value="14" >Orne</option> 
</select>     
</div> 
 
<div id='dpt5' style='display:none;'><label>Département :</label> 
<select name="departement5"> 
<option value="0">«Choisissez»</option> 
<option value="15" >C&ocirc;te-d-or</option> 
<option value="16" >Ni&egrave;vre</option> 
<option value="17" >Sa&ocirc;ne-et-Loire</option> 
<option value="18" >Yonne</option> 
</select>     
</div> 
 
 
   <input class="boutton" name="envoyer" value="envoyer" type="submit"/> 
   <input class="boutton" name="Effacer" value="Effacer" type="reset"/> 
</form> 
 
 
 
</body> 
</html>

Déjà, je te conseille d'afficher les boites avec le onchange().
La partie php se résume t'elle à :

Code:

1
2
3
4
5
6
7
8
9
10
11
<?php
if (isset($_POST["envoyer"]))
{
 
$departement1 = stripcslashes(htmlspecialchars($_POST["departement1"]));
$departement2 = stripcslashes(htmlspecialchars($_POST["departement2"]));
 
echo ''.$departement1.'<br/>'.$departement2.'';
 
}
?>

Le problème vient donc du "selected" que tu attribues.
A chaque onchange sur le choix du département il faut réinitialisé le selected de toutes les boites.

Changer le length n'apporte rien puisque $_POST récupère la value.
Ce qu'il faut c'est donc enlever le selected de l'option list et non mettre toutes la taille de ses options à 0.

Pour chaque boite non concernée (tu peux reprendre mon premier code fournis et le réadapter), au lieu de modifier les tailles des options à 0 :

Code:

1
2
 
document.listes.boiteXX.selectedIndex = '';

On va y arriver, promis!

09/09/2010, 11h45
tryan

Citation:

Envoyé par Lenézé

On va y arriver, promis!

Bhaa c'est pas gagné :oops: et j'aurais peut être du commencé mon poste par :" Je suis nul en JS, fuyez!"

Pour être honnête, je suis complètement largué dans le ton code Javascript et forcément mes essaies n'aboutissent à rien puisque que j'y vais à l'aveuglette.

Le dernier teste -> -http://loupantheres.free.fr/teste1.php

Essaye ceci :

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  <meta http-equiv="Content-Language" content="fr" /> 
  <title>Petites annonces gratuites</title> 
  <meta name="Description" content="Déposez votre annonces gratuitement." /> 
 
  <script type="text/javascript" src="boite.js"></script> 
 <script type="text/javascript"> 
			function removeOptions(divId){
				var monTableau = ["dpt1", "dpt2", "dpt3"]; 
				for (var i=0;i<monTableau.length;i++){
					if(monTableau[i] != "dpt"+divId){
						var optionsDiv = document.getElementById(monTableau[i]).getElementsByTagName("select");
						for (var j=0;j<optionsDiv.length;j++){
							optionsDiv[0].selectedIndex = '';
						}
					}
 
				}
			}
			function selectDpt(regions,dpt){
				var optionsDiv = document.getElementById('dpt'+regions).getElementsByTagName("select");
				for (var j=0;j<optionsDiv[0].length;j++){
					if(optionsDiv[0][j].value == dpt){
					optionsDiv[0].selectedIndex = j;
					}
				}			
			}
		</script> 
  <style> 
  label{
  display:inline;
  font-weight:bold;
  }
  select,input{
  margin:5px;
  }
  .espace{
  margin:0 10px 0 0;
  color:blue;
  font-weight:bold;
  }
  .couleur{
  color:green;
  }
  .erreur{
  color:red;
  border: 1px solid red;
  width:500px;
  height:auto;
  margin:5px;
  padding:5px;
  background-color:#FAB9AD;
  }
  </style> 
 
</head> 
 
<body> 
 
 
 
<form name="listes" action="#ancre_formulaire" method="post"> 
<label>Région :</label> 
<select name="region" onchange="afficheBoitedpt(this.value);removeOptions(this.value);"> 
<option value="0">«Choisissez la région»</option> 
<option value="1">Alsace</option> 
<option value="2">Aquitaine</option> 
<option value="3">Auvergne</option> 
</select> 
<br/> 
 Après validation, la boite département disparait, ce qui empêche une re sélection ainsi qu'une visualisation du département sélectionné.
<div id='dpt1' style='display:none;'><label>Département :</label> 
<select name="departement1"> 
<option value="0">«Choisissez»</option> 
<option value="1">Bas-Rhin</option> 
<option value="2">Haut-Rhin</option> 
</select>     
</div> 
 
<div id='dpt2' style='display:none;'><label>Département :</label> 
<select name="departement2"> 
<option value="0">«Choisissez»</option> 
<option value="3">Dordogne</option> 
<option value="4">Gironde</option> 
<option value="5">Landes</option> 
<option value="6">Lot-et-Garonne</option> 
<option value="7">Pyr&eacute;n&eacute;es-Atlantiques</option> 
</select>     
</div> 
 
<div id='dpt3' style='display:none;'><label>Département :</label> 
<select name="departement3"> 
<option value="0">«Choisissez»</option> 
<option value="8">Allier</option> 
<option value="9">Cantal</option> 
<option value="10">Haute-Loire</option> 
<option value="11">Puy-de-d&ocirc;me</option> 
</select>     
</div> 
 
   <input class="boutton" name="envoyer" value="envoyer" type="submit"/> 
   <input class="boutton" name="Effacer" value="Effacer" type="reset"/> 
</form> 
 
 <?php
if($_POST['region']){
echo "région : ".$_POST['region'].'<br />';
echo "<script type=\"text/javascript\">document.listes.region.selectedIndex = ".$_POST['region'].";</script>";
echo "<script type=\"text/javascript\">afficheBoitedpt(".$_POST['region'].");</script>";
}
if($_POST['departement1']){
echo "dep1 : ".$_POST['departement1'].'<br />';
echo "<script type=\"text/javascript\">selectDpt(1,".$_POST['departement1'].");</script>";
}
if($_POST['departement2']){
echo "dep2 : ".$_POST['departement2'].'<br />';
echo "<script type=\"text/javascript\">selectDpt(2,".$_POST['departement2'].");</script>";
}
if($_POST['departement3']){
echo "dep3 : ".$_POST['departement3'].'<br />';
echo "<script type=\"text/javascript\">selectDpt(3,".$_POST['departement3'].");</script>";}
?>
 
</body> 
</html>

Tu m'en dira des nouvelles :)

Citation:

Bhaa c'est pas gagné et j'aurais peut être du commencé mon poste par :" Je suis nul en JS, fuyez!"

Pourquoi fuir? Nous avons tous été débutant. L'important c'est de persévérer :d

Courage pour la suite, la route est longueeeeeee.

10/09/2010, 12h36
tryan

Bonjour,

Si je ne fais pas fuir, c'est déjà un bon début :mrgreen: .
Quand à ton code Lenézé, tout simplement génial :ave: , grand merci.

Autant le PHP (de base), je me débrouille, autant le JS est du chinois ^^.

Dans ta fonction, peut on faire également qu'un champ "input" de type "text" contenu dans le même "div" qu'un "select" soit également vidé ?

Grand merci :)
10/09/2010, 13h00
Lenézé

Bien sur, tout est possible :)

Regarde du côté de :

Code:

getElementsByTagName("input")

Code:

getAttribute("type") == "text"

Mais cette fois je te laisse te débrouiller ;)
Au boulot!

Lenézé
10/09/2010, 13h18
tryan

Merci beaucoup pour l'indice, je vais essayer de nouveau :D
10/09/2010, 13h51
tryan

Question :

Est ce une nouvelle fonction à créer ou un ajout à une des fonctions existantes?

Je cherche, je cherche ... ^^
10/09/2010, 17h35
tryan

Bon, je cherche, je teste, je me documente mais rien n'y fait ... décidément je n'y comprend vraiment rien :cry: .

Un autre indice ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function removeOptions(divId){
				var monTableau = ["dpt1", "dpt2", "dpt3"];  //tes divs à éventuellement vider
				for (var i=0;i<monTableau.length;i++){ //boucle sur les divs
					if(monTableau[i] != "dpt"+divId){ // si l'id de la div est différent du paramètre (div à garder)
						var optionsDiv = document.getElementById(monTableau[i]).getElementsByTagName("select"); // on prend tous les select qui se trouvent dans la div
						for (var j=0;j<optionsDiv.length;j++){ // on boucle sur les select trouvés
							optionsDiv[0].selectedIndex = '';//pour chaque option du select on enlève le selected
						}
//ta fonction va donc ici. Il suffit cette fois de rechercher les input de type text.
					}
 
				}
			}

Ha ouai .. bha déjà je n'étais pas sur la bonne partie :oops: et merci pour les commentaires, je comprend mieux les lignes ^^.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function removeOptions(divId){
	var monTableau = ["dpt1", "dpt2", "dpt3"];  //tes divs à éventuellement vider
	for (var i=0;i<monTableau.length;i++){ //boucle sur les divs
		if(monTableau[i] != "dpt"+divId){ // si l'id de la div est différent du paramètre (div à garder)
			var optionsDiv = document.getElementById(monTableau[i]).getElementsByTagName("select"); // on prend tous les select qui se trouvent dans la div
			for (var j=0;j<optionsDiv.length;j++){ // on boucle sur les select trouvés
				optionsDiv[0].selectedIndex = '';//pour chaque option du select on enlève le selected
			}
			var inputs = document.getElementById(monTableau[i]).getElementsByTagName("input"); // on prend tous les input qui se trouvent dans la div
			for (var k=0;j<inputs.length;k++){ // on boucle sur les input trouvés
				if (inputs[0].getAttribute('type') == "text")
				{
					inputs[0].value = '';
				}
 
			}
		}
 
	}
}

J'ai un peut de bon ou je suis total à côté de la plaque ?

T'es pas mal du tout :)

Je te conseille de bombarder de alert() pour voir où se trouvent tes problèmes (si tu en as).

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
var inputs = document.getElementById(monTableau[i]).getElementsByTagName("input"); // on prend tous les input qui se trouvent dans la div
			for (var k=0;j<inputs.length;k++){ // on boucle sur les input trouvés
				alert(inputs[0].getAttribute('type'));				
				if (inputs[0].getAttribute('type') == "text")
				{
					inputs[0].value = '';
				}
 
			}

10/09/2010, 22h44
tryan
22h38, j'ai plus de neurones :mrgreen: ..tous grillés !

J'ai "bombardé" d'alerte chaque ligne que j'ai ajouté et ...rien, kedal, nada,walou ...ça ne me sort rien ?? Ceci dit, "vue comme je suis trop bon", j'ai certainement du me planter encore.

J'ai essayé :

Code:

alert(inputs[0].getAttribute('type'));
Code:

1 2 3 if (inputs[0].getAttribute('type') == "text") { alert(inputs[0].getAttribute('type')); }
Code:

1 2 3 if (inputs[0].getAttribute('type')) { alert(inputs[0].getAttribute('type')); }
..et je ne sais plus quoi d'autre encore ..

Je me suis encore planté ou j'en avais au moins un de bon ?

Voir 40 message(s) de cette discussion en une page