Liste deroulante dynamique

smer38 · 04/10/2011, 10h01

Bonjour,

je voudrais en fonction de la valeur d'un liste deroulante mettre a jour une deuxieme liste deroulante.
je joint mon petit bout de code. selon la valeur de v_cycle on met a jour les elements de v_phase.
pour commencer simplement j'essaye juste dans un premier temps de mettre a jour v_phase quand on modifie v_cycle.
concretement ca ne fait rien.
si quelqu'un a une idée je suis preneur, car en consultant les tutoriaux je ne trouva pas mon bonheur.

merci

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
33
34
35
36
37
38
39
40
41
42
43
44
<HTML><HEAD><TITLE>Traitement de simple formulaires avec PHP</TITLE>
</HEAD>
<BODY bgColor=#ffffff>
 
<H1 class=H-1></A>Exemples formulaires </H1>
<DIV>
<script>
function ajout_val(parm)
{
	select.v_phase.options[1].text="ouplala";
	select.v_phase.options[1].value="99";
 
}
 
</script>
<form name="inscription" method="post" action="seuil_gest.php" >
<!---------------->
<table border="0" cellpadding="6" cellspacing="8" class="fond_news">
 
<tr>
	<td style="border:0px solid black">Cycle:</td> 
	<td style="border:0px">
	<SELECT name="v_cycle" onChange="ajout_val(this.value)">
		<OPTION VALUE="1">projet</OPTION>
		<OPTION VALUE="2">edition</OPTION>
	</SELECT>
	</td>
</tr>
 
<tr>
	<td style="border:0px solid black">Phase:</td> 
	<td style="border:0px"> 
	<SELECT id="v_phase" name="v_phase">
		<OPTION VALUE="10">Projet_cadrage</OPTION>
		<OPTION VALUE="20">edition_cadrage</OPTION>	
		<OPTION VALUE="21">edition_integration</OPTION>
		<OPTION VALUE="24">edition_transition</OPTION>
	</SELECT>
	</td>
</tr>	
</table>
</form>
</BODY>
</HTML>

SpaceFrog · 04/10/2011, 10h09

juste au dessus dans la liste des posts ...
il y a ce lien
http://www.developpez.net/forums/d59...s-liees-entre/

bewidia · 04/10/2011, 10h15

Il faut modifier le DOM

Code :

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

1
2
3
 
select = document.getElementById("v_phase");
select.options[select.length] = new Option('ouplala', '99');

ça devrait fonctionner.

smer38 · 04/10/2011, 10h46

Bonjour,
en modifiant le javascript ca ne donne rien et aucune erreur dans la console.

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<HTML><HEAD><TITLE>Traitement de simple formulaires avec PHP</TITLE>
</HEAD>
<BODY bgColor=#ffffff>
 
<H1 class=H-1></A>Exemples formulaires </H1>
<DIV>
<script>
function ajout_val(listeDep)
{
	 //alert('Et une première fonction, une !');
	select = document.getElementById("v_phase");
	select.options[select.length] = new Option('ouplala', '99');
}
</script>
<form name="inscription" method="post" action="seuil_gest.php" >
<!---------------->
<table border="0" cellpadding="6" cellspacing="8" class="fond_news">
<tr>
	<td style="border:0px solid black">Cycle:</td> 
	<td style="border:0px">
	<SELECT name="v_cycle" onChange="ajout_val(this.value)">
		<OPTION VALUE="1">projet</OPTION>
		<OPTION VALUE="2">edition</OPTION>
		<span class="tooltip">Le mot de passe de confirmation doit être identique à celui d'origine</span>
	</SELECT>
	</td>
</tr>
<tr>
	<td style="border:0px solid black">Phase:</td> 
	<td style="border:0px"> 
	<SELECT id="v_phase" name="v_phase">
		<OPTION VALUE="10">Projet_cadrage</OPTION>
	</SELECT>
	</td>
</tr>	
</table>
</form>
</BODY>
</HTML>

bewidia · 04/10/2011, 10h56

J'ai copié/collé ton code et en choisissant quelque-chose dans la première liste, ça rajoute bien l'élément "ouplala" à la seconde ...

smer38 · 04/10/2011, 11h01

Bonjour,

Le code ne fonctionne pas sous Firefox, par contre il fonctionne sous IE.
Merci du coup de main, je vais continuer à travailler sur ce sujet.

Encore merci.

Bovino · 04/10/2011, 11h05

Citation:

Envoyé par smer38

Le code ne fonctionne pas sous firefox

Euh... si.
Ensuite, tu devrais faire attention à ton code HTML qui est... comment dire... ~~périmé~~ old school

En particulier, une balise fermante </a> dont on se demande d'où elle sort et qui peut perturber le navigateur...

smer38 · 04/10/2011, 11h19

le code etait issu d'une page plus complete, mais qui risquait de polluer la discussion. le </a> etait effectivement en trop et firefox n'a pas aimé.
est il possible dans le javascript:
-de tester la valeur de mon v_cycle
-de 'vider' toutes les options de mon select afin de partir d'une liste vide

je dois passer pour un 'bennet' mais j'ai vraiment du mal avec javascript et je trouve que les tutoriel (sans explications) ne sont pas si clair que cela.

merci de votre aide

Auteur · 04/10/2011, 13h55

bonjour,

Code :

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

1
2
3
4
5
6
<SELECT name="v_cycle" onChange="ajout_val(this.value)">
		<OPTION VALUE="1">projet</OPTION>
		<OPTION VALUE="2">edition</OPTION>
		<span class="tooltip">Le mot de passe de confirmation doit être identique à celui d'origine</span>
	</SELECT>

Que vient faire le span dans une balise select

bewidia · 04/10/2011, 14h06

Citation:

Envoyé par smer38

-de tester la valeur de mon v_cycle
-de 'vider' toutes les options de mon select afin de partir d'une liste vide

un petit tuto pour manipuler les select en DOM
http://www.mredkj.com/tutorials/tutorial005.html

04/10/2011, 10h09	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	juste au dessus dans la liste des posts ... il y a ce lien http://www.developpez.net/forums/d59...s-liees-entre/ __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

04/10/2011, 11h01	#6
smer38 Invité de passage Inscription : janvier 2007 Messages : 8 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 8 Points : 0 Points : 0	Compatibilité browser Bonjour, Le code ne fonctionne pas sous Firefox, par contre il fonctionne sous IE. Merci du coup de main, je vais continuer à travailler sur ce sujet. Encore merci.
	00

04/10/2011, 11h19	#8
smer38 Invité de passage Inscription : janvier 2007 Messages : 8 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 8 Points : 0 Points : 0	re code le code etait issu d'une page plus complete, mais qui risquait de polluer la discussion. le </a> etait effectivement en trop et firefox n'a pas aimé. est il possible dans le javascript: -de tester la valeur de mon v_cycle -de 'vider' toutes les options de mon select afin de partir d'une liste vide je dois passer pour un 'bennet' mais j'ai vraiment du mal avec javascript et je trouve que les tutoriel (sans explications) ne sont pas si clair que cela. merci de votre aide
	00

04/10/2011, 10h56	#5
bewidia Membre habitué Inscription : octobre 2009 Messages : 122 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 122 Points : 116 Points : 116	J'ai copié/collé ton code et en choisissant quelque-chose dans la première liste, ça rajoute bien l'élément "ouplala" à la seconde ...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email