Discussion :

[tryan]

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 :

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

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

[Lenézé]

Bonjour Tryan et bienvenue sur ce forum

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

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
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é

[dukej]

Bonjour Tryan et bienvenue sur ce forum

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

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
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.

[tryan]

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

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 :

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

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 :

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
    <select name="categorie">
       <option value="0">«Choisissez la cat&eacute;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>
<!--ETC. car il y a d'autres formulaires-->

A la suite, vient le traitement du formulaire :

Code :

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

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 :

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

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 :

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

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 .

[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)?

..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).

Par contre, si j'ajoute un 3ieme formulaire

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

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é

[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 :

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

obj.options.length=0

ou alors

Code :

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

1
2
3
 
while(obj.options[0]){
obj.removeChild(obj.ptions[0])}

[SpaceFrog]

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
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>

[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 .

[SpaceFrog]

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

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

[tryan]

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
 
			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*/
					}
 
				}
			}

[SpaceFrog]

et les objets html ?