[JSP] Mise à jour d'un menu déroulant en fonction d'un autre

**Lady_jade** · 12/12/2005, 09h33

bonjour,

j'ai deux menus déroulant dont les elements du second dépendant de la selection d'un élement du premier menu déroulant:

voila ce que j'ai écrit:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
<%@ include file="../Connexion_Session/connexionBddMysql.jsp" %>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function MAJ(OptionsFormuleSelect)
{
 document.forms[0].elements['opt'].options.length=0;
 <% String reqSociete = "select * from Societe order by libelle";
	ResultSet res = lienMySQL.executeQuery(reqSociete);
 
 	 while(res.next())
	 {	
	 	int idSociete = res.getInt("idSociete");
		String code = res.getString("Code");
		String libelle = res.getString("libelle");
 
	%>
		if(OptionsFormuleSelect=="<%= idSociete%>")
		{
	<%
 
		Statement lienService = dblien.getLien(cnxMySQL);
	 	String requete = "select * from service where idSociete="+idSociete;
		ResultSet result = lienService.executeQuery(requete);
 
		int i=1;
	%>
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
	<%
				while(result.next())
				{ 
					int idService = result.getInt("idSociete");
					String libelleServ = result.getString("libelle");
 
			%>
					document.forms[0].elements['opt'].options["<%= i%>"].value='<%= idService%>';
					document.forms[0].elements['opt'].options["<%= i%>"].text='<%= libelleServ%>';
			<%
					i++;
				}
			%>
		}
		<%
		}
		%>
		if (OptionsFormuleSelect=='aucun')
		{
		document.forms[0].elements['opt'].length =1; 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Indifférent';
		}
 
}
 
// -->
</SCRIPT>
<TITLE></TITLE>
</HEAD>
<BODY>
 
	<FORM NAME="LAYOUTFORM" ACTION="" METHOD=POST>
 
            <TABLE ID="Table2" BORDER=0 CELLSPACING=3 CELLPADDING=1 WIDTH="42%">
                <TR>
                  <TD WIDTH=184><P CLASS="Arial10" STYLE="text-align: center;">Societe</P></TD>
                  <TD WIDTH=374><P>
                      <SELECT ID="Forms Combo Box1" NAME="IdFormule" onChange="MAJ(this.form.IdFormule.options[this.form.elements['IdFormule'].selectedIndex].value)">
                        <OPTION VALUE="aucun" SELECTED>Selectionner une formule.....</OPTION>
                        <%
											String reqSociete2 = "select * from societe";
											ResultSet rsSociete2;
											rsSociete2 = lienMySQL.executeQuery(reqSociete2);
 
											while (rsSociete2.next())
											{
												int idSoc = rsSociete2.getInt("idSociete");
												String code = rsSociete2.getString("Code");
												String lib = rsSociete2.getString("libelle");
										%>
                        <OPTION VALUE="<%= idSoc%>"><%= lib%></OPTION>
                        <%
											}
										%>
                      </SELECT>
                  </P></TD>
                </TR>
                <TR>
                  <TD WIDTH=184><P CLASS="Arial10" STYLE="text-align: center;">Service</P></TD>
                  <TD WIDTH=374><P>
                      <SELECT ID="Forms Combo Box2" NAME="opt">
                      </SELECT>
                  </P></TD>
                </TR>
            </TABLE>
	</FORM>
</BODY>
</HTML>

voila le code généré:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
 
 
<!-- la page JSP manipule des objets de type Connection et Statement -->
 
 
 
<!-- // DBConnexion Bean -->
 
<!-- // Code d'initialisation -->
 
 
 
<!-- // value="10.0.0.8" -->
 
 
 
 
<!-- // DBLien Bean -->
 
 
 
 
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function MAJ(OptionsFormuleSelect)
{
 document.forms[0].elements['opt'].options.length=0;
 
		if(OptionsFormuleSelect=="1")
		{
 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
					document.forms[0].elements['opt'].options["1"].value='1';
					document.forms[0].elements['opt'].options["1"].text='xjdfj';
 
		}
 
		if(OptionsFormuleSelect=="2")
		{
 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
		}
 
		if(OptionsFormuleSelect=="5")
		{
 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
					document.forms[0].elements['opt'].options["1"].value='5';
					document.forms[0].elements['opt'].options["1"].text='hyjjhvvv';
 
		}
 
		if(OptionsFormuleSelect=="6")
		{
 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
		}
 
		if(OptionsFormuleSelect=="4")
		{
 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
		}
 
		if(OptionsFormuleSelect=="3")
		{
 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
		}
 
		if (OptionsFormuleSelect=='aucun')
		{
		document.forms[0].elements['opt'].length =1; 
		document.forms[0].elements['opt'].options[0].value='aucun';
		document.forms[0].elements['opt'].options[0].text='Indifférent';
		}
 
}
 
// -->
</SCRIPT>
<TITLE></TITLE>
</HEAD>
<BODY>
 
	<FORM NAME="LAYOUTFORM" ACTION="" METHOD=POST>
 
            <TABLE ID="Table2" BORDER=0 CELLSPACING=3 CELLPADDING=1 WIDTH="42%">
                <TR>
                  <TD WIDTH=184><P CLASS="Arial10" STYLE="text-align: center;">Societe</P></TD>
                  <TD WIDTH=374><P>
                      <SELECT ID="Forms Combo Box1" NAME="IdFormule" onChange="MAJ(this.form.IdFormule.options[this.form.elements['IdFormule'].selectedIndex].value)">
                        <OPTION VALUE="aucun" SELECTED>Selectionner une formule.....</OPTION>
 
                        <OPTION VALUE="1">burri</OPTION>
 
                        <OPTION VALUE="2">d,gh</OPTION>
 
                        <OPTION VALUE="3">xndf,</OPTION>
 
                        <OPTION VALUE="4">sht</OPTION>
 
                        <OPTION VALUE="5">dfhdj</OPTION>
 
                        <OPTION VALUE="6">fytk</OPTION>
 
                      </SELECT>
                  </P></TD>
                </TR>
                <TR>
                  <TD WIDTH=184><P CLASS="Arial10" STYLE="text-align: center;">Service</P></TD>
                  <TD WIDTH=374><P>
                      <SELECT ID="Forms Combo Box2" NAME="opt">
                      </SELECT>
                  </P></TD>
                </TR>
            </TABLE>
	</FORM>
</BODY>
</HTML>

j'ai une erreur javascript qui me dit :

Code :

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

1
2
 
document.forms.0.elements.opt.options.0 a la valeur Null ou n'est pas un objet

???

**SpaceFrog** · 12/12/2005, 09h49

sur le forum javascript il y a un post it avec un exemple sur le sujet ...

dans ton cas je pense qu'il doit s'agir d'un problème d'instanciation d'objet, l'instruction étant lancée avant que l'objet soit créé ...

**Lady_jade** · 12/12/2005, 11h27

j'avais bien noté l'exemple sur le forum et d'ailleurs je m'en suit inspirée mais je ne comprends pas mon erreur vu que je n'appelle pas la mise à jour du second menu déroulant que lorsque je clique sur un élément du premier.

**SpaceFrog** · 12/12/2005, 11h36

Code :

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

1
2
<SELECT ID="Forms Combo Box2" NAME="opt">
                      </SELECT>

il a pas d'option ton select !!!!

**Lady_jade** · 12/12/2005, 11h42

justement que je mette :

Code :

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

1
2
3
4
 
<SELECT ID="Forms Combo Box2" NAME="opt">
					  	<option value="aucun">Indifférent</option>
                      </SELECT>

ou que je ne le mette pas j'ai strictement la même erreur...

**SpaceFrog** · 12/12/2005, 11h52

Non ce que je veux dire c'est qu'en première ligne de ton script tu as mis

Code :

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

 document.forms[0].elements['opt'].options.length=0;

mets le = 1

et puis au lieu de if à la chaine pourquoi n'utilises tu pas un switch ?

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
function MAJ(OptionsFormuleSelect)
{
 document.forms[0].elements['opt'].options.length=1;
 
 
 
switch(OptionsFormuleSelect){
 
		case 1: document.forms[0].elements['opt'].options[0].value='aucun';
			     document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
 
               document.forms[0].elements['opt'].options["1"].value='1';
               document.forms[0].elements['opt'].options["1"].text='xjdfj';
               break;
 
      case 2 : 	document.forms[0].elements['opt'].options[0].value='aucun';
      				document.forms[0].elements['opt'].options[0].text='Choisissez un Service';
      break;....

**Lady_jade** · 12/12/2005, 12h02

je comprends pas pourquoi le mettre à 1?

ensuite lorsque j'effectue cette modif, au lieu d'avoir:

Code :

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

1
2
 
document.forms.0.elements.opt.options.0 a la valeur Null ou n'est pas un objet

j'ai

Code :

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

1
2
 
document.forms.0.elements.opt.options.1 a la valeur Null ou n'est pas un objet

**SpaceFrog** · 12/12/2005, 12h07

parcequ'il faut ajouter une option à chaque fois avant de la remplir ...

Code :

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

 document.forms[0].elements['opt'].options.length++

**Lady_jade** · 12/12/2005, 13h32

Super génial!

Merci beaucoup ça marche nickel

[JSP] Mise à jour d'un menu déroulant en fonction d'un autre

JavaScript

Discussions similaires

Partager

Partager