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
| <html>
<body>
<script type="text/javascript">
/* Initialisation XMLHttpRequest */
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;
};
function changeLesListes(num){
var num; // numero de la liste a partir de laquelle on va faire les changements
var div1 = document.getElementById('ididliste1');
var div2 = document.getElementById('ididliste2');
var div3 = document.getElementById('ididliste3');
var val1 = div1.options[div1.selectedIndex].value;
var val2 = div2.options[div2.selectedIndex].value;
var val3 = div3.options[div3.selectedIndex].value;
// SI la liste 1 a changé
if(num==1) {
changeListFromList(val1,0,0,2,'iddivListe2'); // liste 2 -> on modifie
changeListFromList(val1,0,0,3,'iddivListe3'); // liste 3 -> defaut
changeListFromList(val1,0,0,4,'iddivListe4'); // liste 4 -> defaut
// SI la liste 2 a changé
} else if(num==2) {
changeListFromList(val1,val2,0,3,'iddivListe3'); // liste 3 -> on modifie
changeListFromList(val1,val2,0,4,'iddivListe4'); // liste 4 ->defaut
// SI la liste 3 a changé
} else if(num==3) {
changeListFromList(val1,val2,val3,4,'iddivListe4'); // liste 4 -> on modifie
}
};
/* Changer la liste n+1 après choix dans la liste n */
function changeListFromList(val1,val2,val3,numliste,iddiv){
var val1; // valeur de l option choisie (liste 1)
var val2; // valeur de l option choisie (liste 2)
var val3; // valeur de l option choisie (liste 3)
var numliste; // numero de la liste A MODIFIER
// -> pour le nom de fichier a utiliser : listeslieesAjax-liste2.php, listeslieesAjax-liste3.php ou listeslieesAjax-liste4.php
var iddiv; // id du div qu'on remplira
var xhr = getXhr();
xhr.onreadystatechange = function(){
// si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
texthtml = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste des "selections"
document.getElementById(iddiv).innerHTML = texthtml;
}
}
// on defini la methode (post) + le fichier de traitement + asynchrone (true)
xhr.open("POST","liste"+numliste+".php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// on poste les parametres a transmettre au fichier qui fera le traitement
xhr.send("val1="+val1+"&val2="+val2+"&val3="+val3);
};
</script>
<form method="post" action="test.php">
<fieldset style="width:550px;">
<legend>Listes liées</legend>
<p>
<label>Liste 1 : </label>
<select id="ididliste1" name="idliste1" onchange="changeLesListes(1);">
<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
<option value="0">Choisissez ...</option>
<option value="1">choix1</option>
<option value="2">choix2</option>
<option value="3">choix3</option>
</select>
</p>
<p>
<label>Liste 2 : </label>
<span id="iddivListe2"><!-- par innerHTML AJAX va ecrire la liste 2 -->
<!-- on peut mettre d abord une option "par defaut" : -->
<select id="ididliste2" name="idliste2">
<option value="0">(Choisissez avant dans la liste 1)</option>
</select>
</span>
</p>
<p>
<label>Liste 3 : </label>
<span id="iddivListe3"><!-- par innerHTML AJAX va ecrire la liste 3 -->
<!-- on peut mettre d abord une option "par defaut" : -->
<select id="ididliste3" name="idliste3">
<option value="0">(Choisissez avant dans la liste 2)</option>
</select>
</span>
</p>
<p>
<label>Liste 4 : </label>
<span id="iddivListe4"><!-- par innerHTML AJAX va ecrire la liste 4 -->
<!-- on peut mettre d abord une option "par defaut" : -->
<select id="ididliste4" name="idliste4">
<option value="0">(Choisissez avant dans la liste 3)</option>
</select>
</span>
</p>
<p>
<input type="submit" name="btenvoi" value="ok" />
</p>
</fieldset>
</form>
</body>
</html> |
[AJAX] 4 listes liées en PHP/MySQL/AJAX
Répondre avec citation
Envoyé par elmanu13
Partager