Lier trois listes déroulantes
Bonjour,
Avant toute remarque je précise que j'ai déjà recherché sur le forum des posts similaires à mon problème mais qu'aucun n'a pu m'aider, et que j'ai déjà lu le cours sur les listes liées car je l'ai déjà mis en place et ça marchait.
Maintenant le pourquoi de mon post :)
Voila j'affiche trois listes déroulantes sur ma page, remplies via une requête SQL faite au serveur.
Lorsque je sélectionne une option dans la première liste, la deuxième se réduit comme je le veux.
Par contre, je cherche à updater en même temps la troisième liste.
Également, lorsque je sélectionne une option dans la deuxième, la troisième doit encore se modifier.
Pour plus de compréhension, la première liste correspond aux types, la deuxièmes aux projets et la troisième aux applications.
L'encapsulation est la suivante : les applis sont regroupées par projet, regroupés eux même par type.
En clair je souhaite que lorsqu'on sélectionne un type, on ne voit plus que les projets et les applis correspondantes, et idem entre les projets et les applis.
Voici mon code : (sans les options dans les listes pour ne pas encombrer)
Tout d'abord la page principale :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div style="display:inline;" >
<select name="appTypeName" onchange="updateProjectList(this.value);updateApplicationList(this.value, null);" >
</select>
</div>
<div style="display:inline;" id="projectList" >
<select name="projName" onchange="updateApplicationList(null, this.value);" >
</select>
</div>
<div style="display:inline;" id="applicationList" >
<select name="appName" >
</select>
</div> |
Ensuite le script javascript qui contient les fonctions :
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
|
function getXhr() {
var xhr = null;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else {
alert("Your browser doesn't support XMLHTTPRequest objects ...");
xhr = false;
}
return xhr;
}
function updateProjectList(appTypeName){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('projectList').innerHTML = '';
document.getElementById('projectList').innerHTML = leselect;
}
}
xhr.open("POST","projectList.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("appTypeName="+appTypeName);
}
function updateApplicationList(appTypeName, projName){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('applicationList').innerHTML = '';
document.getElementById('applicationList').innerHTML = leselect;
}
}
xhr.open("POST","applicationList.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("appTypeName="+appTypeName+"&projName="+projName);
} |
Je pense qu'il est inutile de mettre le script php qui update la liste des projets car cette partie fonctionne parfaitement, voila donc le script qui update la liste des applications :
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
|
<?php
/**
* This script modify the application list on the incident page according to the selected application's type and the selected project
*/
if (isset($_POST['appTypeName'] && isset($_POST['projName']))
{
require_once("../../scripts/functions.php");
require_once("../../scripts/values.env");
$appTypeName = unescapeForm($_POST['appTypeName']);
$projName = unescapeForm($_POST['projName']);
$connect = connection();
//we will display a list which contains all the project's names
echo '<select name="appName" >
<option value="" ></option>';
if ($projName == "" || $projName == null)
{
if ($appTypeName == "" || $appTypeName == null)
{
$sqlRequest = 'SELECT appName, projName FROM Application';
}
else
{
$sqlRequest = 'SELECT appName, projName FROM Application WHERE ProjName LIKE\'%'.escapeRequest($appTypeName).'/%\'';
}
}
else
{
$sqlRequest = 'SELECT appName, projName FROM Application WHERE ProjName=\''.escapeRequest($projName).'\'';
}
$res = request($connect, $sqlRequest);
//remplissage des listes
echo '</select> ';
}
echo 'ok';
?> |
Voila. Ce que j'ai donc: la liste des projets est correctement updatée, mais la liste des applications disparait (et il n'y a aucune erreur javascript)
Merci d'avance pour votre aide car je cherche depuis hier soir sans résultat ...
