Discussion :

[Er3van]

Bonjour,

Le problème que je vais vous soumettre est à mon avis un classique, qqchose de simple, mais je n'ai pas vraiment le temps d'aller apprendre le JS puisque c'est à faire pour hier, comme toujours... :X

Donc j'espère que qqun acceptera de m'aider.

Voici mon problème :

Je dois faire un formulaire (en fait, je dois modifier un formulaire existant, mais passons...), et dans l'un des champs (<select>), lorsque l'on selectionne une option précise, cela aura pour effet de rajouter plusieurs options dans le champ suivant.

J'imagine donc que je vais devoir avoir qqchose comme ça :

Code html :

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

1
2
3
4
5
<select name="monForm1">
    <option value="1">Choix 1</option>
    <option value="2">Choix 3</option>
    <option value="3" onClick="maFonctionJS()">Choix 3</option>
</select>

Mais du coup, à quoi va correspondre la-dite fonction ?


Etant donné qu'il n'y a pas d'acces en BDD j'ose croire que JS suffira amplement...


Merci d'avance à tous ceux qui s'attarderont sur mon cas

[E.Bzz]

Bonjour,
tout d'abord un évènement (onclick) sur une option ne donnera rien sous IE : il faut gérer ça dans le tag <select> (onchange).

Ensuite, tu as un post à lire en tout premier lieu

Enfin, il faudrait au moins que tu saches (et nous dise), ce que fonctionnellement tu dois ajouter dans le champ suivant, pour voir où l'info est dispo ...

A+

[Er3van]

Merci pour lien mais j'y suis déjà passé, mais à l'heure actuelle je ne suis pas capable d'interprété tout le code...

Et particulièrement faire le tri de ce dont j'ai besoin ou non...

Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, j'ai l'option 3 et 4 qui s'ajoute au select 2.

J'vais essayer de voir le code plus en détail, mais c'est pas gagné...

[E.Bzz]

Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, j'ai l'option 3 et 4 qui s'ajoute au select 2.

Quelque chose comme ça (à appeler sur onchange du select, donc) ?

Code :

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

1
2
3
4
5
6
7
8
9
function TransfertListe(idOrigine, idDestination)
{	var objOrigine = document.getElementById(idOrigine);
	var objDestination = document.getElementById(idDestination);
for (i=0; i<objOrigine.options.length; i++) 
    if (objOrigine.options[i].value != objOrigine.options[objOrigine.options.selectedIndex].value) {
	ADeplacer = new Option(objOrigine.options[i].text, objOrigine.options[i].value);
	objDestination.options[objDestination.length]=ADeplacer;
}
}

A+

[Er3van]

Bon, le code de la Faq n'a décidément pas grand chose à voir avec ce que je souhaite, néanmoins, de ce que j'ai compris, je devrais avoir qqchose comme ça :

Code html :

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

1
2
 
<select name="listeville" onChange='addToForm(this.value)'>

Code :

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

1
2
3
4
5
6
7
 
<script language="javascript">
function addToForm(value) {
    if ( value == 3 ) {
     ....
    }
</script>

Mais il me manque toujours la partie "ajout dans le formulaire".

[Er3van]

Le truc c'est que mon formulaire est généré par PHP, mais bon, le code généré est le suivant :

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
<tr>
				<td>
				<span class="formulaire">Projet : </span>
				</td>
				<td>
				<select name="projet" style="width:180px;">
 
					<option value="null"></option>
				<option value="1">SIRH</option>
				<option value="2">Oriade</option>
				</select>
				</td>
			</tr>
			<tr bgcolor="#FFCCCC">
				<td>
 
				<span class="formulaire">Environnement : </span>
				</td>
				<td>
				<select name="environnement[]" style="width:180px;" multiple>
				<option value="1">BDD Oracle 10g Linux</option><br/>
				<option value="2">Serveur Web</option><br/>
				<option value="3">OSX</option><br/>
 
				<option value="4">Apache</option><br/>
				</select>
				</td>
			</tr>

Et donc pour donner des noms ayant du sens, je souhaiterais que quand je selectionne SIRH, j'obtienne trois options supplémentaires dans le select "environnement".
L'une des options est par exemple

Code :

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

<option value="5">AppSIR</option>

Par rapport à ta fonction, je ne comprends pas vraiment tous les test effectués....

En adaptant, est-ce que j'aurais cela ?

Code :

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

1
2
3
4
5
6
7
8
function TransfertListe()
{	var objOrigine = "projet" ;
	var objDestination = "environnement" ;
        if ( objOrigine.options.selectedIndex.value == "1" ) {
	     Ajouter = new Option("5", "AppSIR");
	     objDestination.options[objDestination.length]=Ajouter;
        }
}

[E.Bzz]

En adaptant, est-ce que j'aurais cela ?

Code :

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

1
2
3
4
5
6
7
8
function TransfertListe()
{	var objOrigine = "projet" ;
	var objDestination = "environnement" ;
        if ( objOrigine.options.selectedIndex.value == "1" ) {
	     Ajouter = new Option("5", "AppSIR");
	     objDestination.options[objDestination.length]=Ajouter;
        }
}

Non, pas du tout

La fonction est à prendre telle quelle.
Tu as juste à ajouter un id à tes select (identique au name, par ex. mais sans les [] ), et à passer ces id en paramètre à la fonction (sur le onchange du 1° select)

A+

[Er3van]

Non, pas du tout

La fonction est à prendre telle quelle.
Tu as juste à ajouter un id à tes select (identique au name, par ex. mais sans les [] ), et à passer ces id en paramètre à la fonction (sur le onchange du 1° select)

A+

Ok, mille merci ça marche !
En revanche, ça m'ajoute des options non souhaitées...
Comment je pourrais l'adapter (sans tout casser) pour que ça n'ajoute que des options de mon choix (non contenues dans le formulaire d'origine) et uniquement pour l'une des options ?

Mes divers essais jusqu'à maintenant furent infructueux :S

[E.Bzz]

Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, j'ai l'option 3 et 4 qui s'ajoute au select 2.

Faudrait savoir

[Er3van]

Autant pour moi, l'option 3 et 4 ne font pas partie du select 1 ^^'
"Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, le select 2 reçoit deux options supplémentaires."
Mal exprimé, ma faute

J'ai modifié le code est ça n'agit plus que dans le cas où je selectionne "SIRH", en revanche, si je selectionne SIRH, puis autre chose, puis SIRH, ça me rajoute les options :S

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function AjouterAuxEnv(idOrigine, idDestination)
					{	var objOrigine = document.getElementById(idOrigine);
						var objDestination = document.getElementById(idDestination);
						var uneFois = 1 ;
						if (objOrigine.options[objOrigine.options.selectedIndex].value == "1" && uneFois == 1 ) {
							newOption = new Option("AppSIR", "5");
							objDestination.options[objDestination.length]=newOption;
							newOption = new Option("AppDEC", "6");
							objDestination.options[objDestination.length]=newOption;
							uneFois = 2 ;
						}
					}

Et quelle serait la fonction pour supprimer les options dans le cas où je sélectionne un autre attribut ?

[Er3van]

Encore merci

Bon, j'ai fais plusieurs modifs et voici mon code :

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
 
<script type="text/javascript">
	var uneFois = 1 ;
	function AjouterAuxEnv(idOrigine, idDestination) {
		var objOrigine = document.getElementById(idOrigine);
		var objDestination = document.getElementById(idDestination);
		if (objOrigine.options[objOrigine.options.selectedIndex].value == "1" && uneFois == 1 ) {
			newOption = new Option("AppSIR");
			objDestination.options[4]=newOption;
			newOption = new Option("AppDEC");
			objDestination.options[5]=newOption;
			uneFois = 2 ;
		}
		else {
			EnleverAuxEnv(idOrigine, idDestination)
		}
	}
	function EnleverAuxEnv(idOrigine, idDestination) {
		var objOrigine = document.getElementById(idOrigine);
		var objDestination = document.getElementById(idDestination);
		for ( i=5 ; i>3 ; i-- ) {
			objDestination.options[i]=null ;
		}
		uneFois = 1 ;
	}
</script>

A priori tout fonctionne, mais comment puis-je vérifier que les "value" soient bonnes ? (puisque dans le code source ça n'appaitra pas...)

[Bovino]

D'abord, je ne vois pas l'intérêt de ta variable 'uneFois' ni de la fonction EnleverAuxEnv

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
<script type="text/javascript">
	function AjouterAuxEnv(idOrigine, idDestination) {
		var objOrigine = document.getElementById(idOrigine);
		var objDestination = document.getElementById(idDestination);
		if (objOrigine.options[objOrigine.options.selectedIndex].value == "1") {
			newOption = new Option("AppSIR");
			objDestination.options[4]=newOption;
			newOption = new Option("AppDEC");
			objDestination.options[5]=newOption;
		}
		else {
		        for ( i=5 ; i>3 ; i-- ) {
			      objDestination.options[i]=null ;
		        }
                }
	}
</script>

devrait fonctionner aussi bien.

Ensuite, qu'entends-tu par

vérifier que les "value" soient bonnes ?

[Er3van]

Ma variable "uneFois" fait qu'une selection de SIRH, puis encore de SIRH, ne rajoute pas 2*2 lignes.

Et finalement je suis passé par une base de données....

J'ai rusé un peu pour ne pas utiliser AJAX et ça marche

Mon code "pseudo-final en version béta comme FF3 " :

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
			<script type="text/javascript">
				var uneFois = 1 ;
				function AjouterAuxEnv(idOrigine, idDestination)
					{	var objOrigine = document.getElementById(idOrigine);
						var objDestination = document.getElementById(idDestination);
						if (objOrigine.options[objOrigine.options.selectedIndex].value == "1" && uneFois == 1 ) {
							for ( i=3 ; i<8 ; i++ ) {
							objDestination.options[i].style.display="block";
							}
							uneFois = 2 ;
						}
						else {
							EnleverAuxEnv(idOrigine, idDestination);
						}
					}
				function EnleverAuxEnv(idOrigine, idDestination)
					{	var objOrigine = document.getElementById(idOrigine);
						var objDestination = document.getElementById(idDestination);
						for ( i=7 ; i>3 ; i-- ) {
							objDestination.options[i].style.display="none";
						}
						uneFois = 1 ;
					}
			</script>

[Bovino]

Tant mieux si tu as pu résoudre ton problème, cependant, pour info :

Ma variable "uneFois" fait qu'une selection de SIRH, puis encore de SIRH, ne rajoute pas 2*2 lignes.

Logiquement, cela ne doit pas pouvoir se produire car si l'option 1 est sélectionnée, que tu repasses par le select en rechoisissant l'option 1, il n'y a pas de change, donc pas de onchange et donc pas de doublon...

[Er3van]

Plutôt que de récréer un topic je vais enchainer ici :

Je souhaiterai, avec une nouvelle fonction JavaScript, selectionner une option en fonction de la valeur de l'option sélectionnée dans un autre select.
Pour ça, je suis reparti de la fonction de tout à l'heure, seulement cette fois, rien ne se passe, et j'avoue avoir du mal à comprendre...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function SelectArchi(idOrigine, idDestination)
{	var objOrigine = document.getElementById(idOrigine);
	var objDestination = document.getElementById(idDestination);
	if (objOrigine.options[objOrigine.options.selectedIndex].text.test("64")==true ) {
		objDestination.selectedIndex=3;
	}
	else {
		objDestination.selectedIndex=2;
	}
}

Code HTML :

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

<select name="distribution" id="distribution" style="width:180px;" onchange="SelectArchi('distribution','architecture')"/>

Même si le test est faux, on devrait bien avoir l'index 2 de selectionné non ?