Liste deroulante dynamique

**smer38** · 04/10/2011, 11h01

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, 11h09

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, 11h15

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, 11h46

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, 11h56

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, 12h01

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, 12h05

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, 12h19

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, 14h55

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