Liste deroulante dynamique

Version imprimable

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:

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>

04/10/2011, 10h09
SpaceFrog

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

Il faut modifier le DOM

Code:

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

ça devrait fonctionner.

Ca ne fonctionne pas

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

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

04/10/2011, 10h56
bewidia

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 ...
04/10/2011, 11h01
smer38

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.
04/10/2011, 11h05
Bovino

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 :aie:
En particulier, une balise fermante </a> dont on se demande d'où elle sort et qui peut perturber le navigateur...
04/10/2011, 11h19
smer38

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

bonjour,

Code:

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

04/10/2011, 14h06
bewidia

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