Effacer toutes les options de plusieurs select?

Version imprimable

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 ?
11/09/2010, 09h10
tryan

Bonjour,

Allé, c'est repartit ^^. Pour l'alert, ça me retourne "text" en boucle ! Je suis obligé d'utiliser le gestionnaire de tâches de windows pour fermer mon navigateur...

Le faite d'avoir le mot "text" dans la boite d'alerte signifie quoi ?

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
function wipeout(){
var i=0
while(sel=document.getElementById('sel_'+(++i))){
	while(sel.options[0]){
	                      sel.removeChild(sel.options[0])
	                      }
}
}
</script>
</head>
<body>
 <select name="liste1" id="sel_1" onChange="document.getElementById('sel_2').options.length=0;">
            <option></option>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
        <select name="liste2" id="sel_2" onChange="document.getElementById('sel_1').options.length=0;">
            <option></option>
            <option>d</option>
            <option>e</option>
            <option>f</option>
        </select>
<input type='button' onclick="wipeout()" value="tout vider" />
</body>
</html>

11/09/2010, 18h27
tryan

Bonjour,

SpaceFrog, je ne comprend pas l'intérêt de ton code dans ma "quête" ?
Ton formulaire vide les "select" lors de la sélection d'un autre select ou par le biais d'un bouton.

Moi je cherche à vider un ou des champs de type "text" contenu hors du "div" ou je me trouve.

Merci quand même pour le code, ça me permet d'apprendre :mrgreen: .
11/09/2010, 19h17
SpaceFrog

Désolé je suis resté sur l'intitulé du post ...

Donne moi ton code complet en l'état actuel ...

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
 
			function removeOptionscat(divId){
				var monTableau = ["cat1", "cat2"];   //tes divs à éventuellement vider
				for (var i=0;i<monTableau.length;i++){//boucle sur les divs
					if(monTableau[i] != "cat"+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	
						}
//teste fonction pour rechercher les input de type text.
						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")//si l'input est de type text
			{
 
				inputs[0].value = '';//on vide l'élément
			}
 
						}
 
						/*fin de teste*/
					}
 
				}
			}

11/09/2010, 19h22
SpaceFrog

et les objets html ?
11/09/2010, 19h23
tryan

Citation:

Envoyé par SpaceFrog

et les objets html ?

C'est à dire ?
11/09/2010, 19h27
SpaceFrog

8O
il y a bien du code html associé ...
le code des inputs ...

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
 
 
<!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>++</title> 
  <meta name="Description" content="++" /> 
 
 
 <script type="text/javascript"> 
 /*Département*/
 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';
         }
      }
   }
}
			function removeOptionsdep(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 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;
					}
				}			
			}
/*Catégorie*/
function afficheBoitecat(num) {
   var maxBoitecat = 43; // Indiquer ici le nombre maximale de boite possible
   for (var i = 1; i <= maxBoitecat; i++) {
      var cat = document.getElementById('cat'+i);
      if (cat) {
         if (i == num) {
            cat.style.display = '';
         } else {
            cat.style.display = 'none';
         }
      }
   }
}
 
			function removeOptionscat(divId){
				var monTableau = ["cat1", "cat2"];   //tes divs à éventuellement vider
				for (var i=0;i<monTableau.length;i++){//boucle sur les divs
					if(monTableau[i] != "cat"+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	
						}
//teste fonction pour rechercher les input de type text.
						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")//si l'input est de type text
			{
 
				inputs[0].value = '';
			}
 
						}
 
						/*fin de teste*/
					}
 
				}
			}
			function selectCat(categories,cat){
				var optionsDiv = document.getElementById('cat'+categories).getElementsByTagName("select");
				for (var j=0;j<optionsDiv[0].length;j++){
					if(optionsDiv[0][j].value == cat){
					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);removeOptionsdep(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/> 
 
<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> 
 
<label>Catégorie :</label>
  <select name="categorie" onchange="afficheBoitecat(this.value);removeOptionscat(this.value);">
        <option value="0">«Choisissez la cat&eacute;gorie»</option>
			<option value="1">Voitures</option>
			<option value="2">Motos</option>
      </select>
 
<div id='cat1' style='display:none;'><span class="espace">Année :
<select name="annee_voiture">
<option value="0">«Choisissez»</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
</select> 
</span> 
 
<span class="espace">Kilométrage :
<input name="km_voiture" value="<?php
if (!empty($_POST["km_voiture"])) {
echo stripcslashes(htmlspecialchars($_POST["km_voiture"],ENT_QUOTES));
}?>" maxlength="7" size="13" type="text"> km
</span>
 
<span class="espace">Carburant :
<select  name="carburant_voiture">
<option value="0">«Choisissez»</option>
<option value="1">Essence</option>
<option value="2">Diesel</option>
<option value="3">GPL</option>
<option value="4">Electrique</option>
<option value="5">Autre</option>
</select>
</span>
 
<span class="espace">Boîte de vitesse :
<select name="vitesse_voiture">
<option value="0">«Choisissez»</option>
<option value="1">Manuelle</option>
<option value="2">Automatique</option>
</select>
</span>
</div>
 
 <div id='cat2' style='display:none;'><span class="espace">Année :
<select name="annee_moto">
<option value="0">«Choisissez»</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
</select>
</span>
 
<span class="espace">Kilométrage :
<input name="km_moto" value="<?php
if (!empty($_POST["km_moto"])) {
echo stripcslashes(htmlspecialchars($_POST["km_moto"],ENT_QUOTES));
}?>" maxlength="7" size="13" type="text"> km     
</span>
 
 
<span class="espace">Cylindrée :
<input name="cylindree_moto" size="5" maxlength="4" value="<?php
if (!empty($_POST["cylindree_moto"])) {
echo stripcslashes(htmlspecialchars($_POST["cylindree_moto"],ENT_QUOTES));
}?>" type="text"> cm³
</span>
</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 "<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 "<script type=\"text/javascript\">selectDpt(3,".$_POST['departement3'].");</script>";}
 
echo '.dep1: '.$_POST['departement1'].'<br>dep2:'.$_POST['departement2'].'<br>dep3:'.$_POST['departement3'].'<br/>';
 
if($_POST['categorie']){
echo "catégorie : ".$_POST['categorie'].'<br />';
echo "<script type=\"text/javascript\">document.listes.categorie.selectedIndex = ".$_POST['categorie'].";</script>";
echo "<script type=\"text/javascript\">afficheBoitecat(".$_POST['categorie'].");</script>";
}
 
if($_POST['annee_voiture']){
echo "<script type=\"text/javascript\">selectCat(1,".$_POST['annee_voiture'].");</script>";}
 
if($_POST['km_voiture']){
echo "<script type=\"text/javascript\">selectCat(1,".$_POST['km_voiture'].");</script>";}
 
if($_POST['annee_moto']){
echo "<script type=\"text/javascript\">selectCat(2,".$_POST['annee_moto'].");</script>";}
 
if($_POST['km_moto']){if($_POST['km_moto']==''){$_POST['km_moto']==0;}
echo "<script type=\"text/javascript\">selectCat(2,".$_POST['km_moto'].");</script>";}
 
echo 'année voiture:'.$_POST['annee_voiture'].'<br>année moto:'.$_POST['annee_moto'].'<br>';
 
echo 'km voiture:'.$_POST['km_voiture'].'<br>km moto:'.$_POST['km_moto'].'';
 
?>
 
</body> 
</html>

:calim2:
:(

html ...
je ne crois pas voir parlé de php ...

sinon quel interet de faire une boucle sur k si tu ne vide que le 0 à chaque fois ??
Code:

1 2 3 4 5 6 7 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[k].type== "text")//si l'input est de type text { inputs[k].value = '';//on vide l'élément } }

11/09/2010, 20h21
tryan

Citation:

Envoyé par SpaceFrog

:calim2:
:(

html ...
je ne crois pas voir parlé de php ...

Dans le doute d'un manque de compréhension , je préfère tout mettre.

Citation:

sinon quel interet de faire une boucle sur k si tu ne vide que le 0 à chaque fois ??

Comme je l'ai dit dans un de mes postes précédents, je suis nul en Javascript.
Lenézé m'a écrit les 3/4 du code avec tout plein d'explications et il me laisse chercher la fonction qui me manque. Donc, je teste plein de chose et je re teste pour trouver par moi même et vue mon niveau ... bha je fais plein de conneries ... mais j'essaye quand même :) .

Bonjour,

Je persiste encore ... tout mes input de type text et "select" ne se vide pas si j'effectue à tour de rôle différentes sélections.

Par exemple, si je sélectionne la catégorie "immobilier", que je remplit tout les champs et que je valide puis que je veuille changer de catégorie, par exemple "automobile", que je remplit tout les champs et que je valide à nouveau..., mes précédentes sélections ne se vide pas ??

Est ce normal?
Page de teste: -http://loupantheres.free.fr/teste1.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
			function removeOptionscat(divId){
				var monTableau = ["cat1", "cat2", "cat3"];   //tes divs à éventuellement vider
				for (var i=0;i<monTableau.length;i++){//boucle sur les divs
					if(monTableau[i] != "cat"+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	
						}
						//teste fonction pour rechercher les input de type text.
						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[k].type== "text")//si l'input est de type text
							{ 
								inputs[k].value = '';//on vide l'élément
							}						
						}
						/*fin de teste*/
					}
 
				}
			}

Merci

Code:

1
2
3
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    
                        }

tu boucles sur j ... :roll: mais tu as optionsDiv[0]

et une remise à zero de select c'est avec

Code:

selectedIndex=-1

Code:

1 2 3 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 }
C'était dans un soucis d'évolutivité :)
J'ai commencé mes tests avec plusieurs select.

Code:

selectedIndex=-1

Ça je ne savais pas :p
J'ai toujours utilisé ''.

Javascript Grrr