[AJAX] Listes liées en AJAX
Bonjour à tous amis développeurs !
Après des heures et des heures de recherche, et étant débutant en AJAX, je me retrouve dans une situation on ne peut plus bloquée.
Voici mon soucis:
Je souhaite construire, une deux listes liées.
Dans mon premier select, je vais pouvoir sélectionner une promotion.
A partir de cette sélection, un script va se déclencher afin de construire une deuxième comboBox contenant les étudiants de la promotion sélectionnée précédemment.
Voici le code que j'ai:
Le Javascript et l'AJAX:
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
|
function getXhr() {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHttpRequest...");
xhr = false;
}
return xhr;
}
function chargeEtudiantPourPromoSelectionne() {
var xhr = getXhr();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
leselect = xhr.responseText;
document.getElementById('etudiants').innerHTML = leselect;
}
}
xhr.open("POST", "choix_promo.php", true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
sel = document.getElementById('promotion');
idPromotion = sel.options[sel.selectedIndex].value;
// Le problème est ici !!!
alert(idPromotion);
xhr.send("idPromotion="+idPromotion);
} |
le fichier choix_promo.php que j'appelle dans mon script ci-dessus:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php
include './includes/Connexion.php';
echo "<select id='etudiants' name='etudiants' style='width: 100%; font-size: 11px; font-family: Verdana'>";
if(isset ($_POST["idPromotion"])) {
$requete = Connexion::requete("SELECT * FROM etudiant WHERE id_promotion = '".$_POST['idPromotion']."' ORDER BY nom_etudiant");
while($row = mysql_fetch_assoc($requete)) {
echo "<option value='".$row['id_booster']."'>".$row['nom_etudiant']." ".$row['prenom_etudiant']."</option>";
}
}
echo "</select>";
?> |
Et enfin, mon fichier HTML contenant le select pour les promotions et celui pour les étudiants:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<tr>
<td class="texteCommun">* Promotion</td>
<td>
<select id="promotion" name="promotion" onchange="chargeEtudiantPourPromoSelectionne()" style="width: 100%; font-size: 11px; font-family: Verdana">
<option value="-1"></option>
<option value="1">Classe 1</option>
<option value="2">Classe 2</option>
<option value="3">Classe 3</option>
</select>
</td>
</tr>
<tr>
<td class="texteCommun">* Etudiants</td>
<td>
<select id="etudiants" name="etudiants" style="width: 100%; font-size: 11px; font-family: Verdana">
<option value="-1"></option>
</select>
</td>
</tr> |
Le problème est en fait, que lorsque je reçois mon il me donne -1 comme valeur... En gros, mon
Code:
sel.options[sel.selectedIndex].value
ne fonctionne pas et ne va pas récupérer les valeurs de mes options dans le select promotion.
Est-ce que quelqu'un a une idée ? J'espère que vous allez pouvoir m'aider je désespère :cry:
A noté, j'ai testé sous Safari et Mozilla, j'ai la même erreur...
Merci d'avance !!
