Listes déroulantes liées en JSP
Bnjour,
Je souhaiterais développer des listes liées dynamiquement en fonction du choix de la première via une BDD. Pour cela j'utilise l'événement Onchange de javascript mais je n'y arrive pas. il y a plus de 2 semaines que je bloque sur ça, si quelqu'un pourrait m'aider je lui serais reconnaissant.
Probléme :
j'utilise la variable sValue = request.getParameter("groupName") pour récupérer le groupName sélectionné dans la liste "affiche2Suite.jsp" et je veux qu'il m affiche dans la 2iéme liste les moniteurs correspondants au groupe selectionné dans le premiére Liste 'affiche1Suite.jsp'
voici mon code :
affiche1Suite.jsp :
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
| <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" import="java.sql.*"%>
<%
String url = "jdbc:mysql://localhost/test";
String username = "root";
String password = null ;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(url,username,password);
Statement stmt = con.createStatement();
%>
<%
String sValue = request.getParameter("groupName");
%>
<%
out.println("<select name ='monitor' >");
ResultSet rs = (ResultSet) stmt.executeQuery("select monitorName from CPUgraph where groupName like '"+sValue+"' group by groupName, monitorName order by groupName asc");
out.println("<option >--Choisissez un moniteur---</option>");
while (rs.next()) {
out.println("<br>");
out.println("<option value ='"+rs.getString("monitorName")+"'>"+rs.getString("monitorName")+"</option>");
out.println("<br>");
}
rs.close();
out.println("</select>");
%> |
-------------------
affiche2Suite.jsp :
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
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
| <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" import="java.sql.*"%>
<%
String url = "jdbc:mysql://localhost/test";
String username = "root";
String password = null ;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(url,username,password);
Statement stmt = con.createStatement();
%>
<html>
<head>
<title>SiteScope graph old</title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('monitor').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","affiche1Suite.jsp",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du groupName
sel = document.getElementById('group');
idgroup = sel.options[sel.selectedIndex].value;
xhr.send("idGroup="+idgroup);
}
function changer(){
document.formulaire.champstext.value=document.formulaire.groupName.value;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<center><H1>SiteScope +</h1>
<form name="formulaire">
<select name='groupName' id='group' onChange ='go();'>
<option value ='-1' >--Choisissez un groupe---</option>
<%
ResultSet rs2 = (ResultSet) stmt.executeQuery("select groupName from CPUgraph group by groupName");
while (rs2.next()) {
out.println("<option name = 'test' value = '"+rs2.getString("groupName")+"'>"+rs2.getString("groupName")+"</option>");
}
rs2.close();
%>
</select>
</form>
<label> moinitor</label>
<div id = 'monitor' style ='display:inline'>
<select name ='monitor'>
<option value ='-1'> Choisir 1 monitor</option>
</select>
</div>
</body>
</html> |
