[AJAX] 3 select liés

Bonjour,

J'apprends l'AJAX depuis quelques jours et je me heurte à un petit problème, sans trouver de solution suite à quelques recherches.

J'ai besoin de réaliser 3 select liés.
Le 1er select est écrit directement en XHTML (généré en PHP). J'arrive sans problème à générer le 2ème select en AJAX.

Mon problème vient au moment de générer le 3ème select en fonction du choix réalisé dans le 2ème select.

La page en question en visible à cette adresse :
http://www.elisae2011.fr/v4/ressource_submit.php
Le système est testable : choisissez SUP > Mathématiques.

Le problème est simple : puisque le select 2 est écrit en javascript, je n'arrive pas à récupérer sa valeur avec un onchange="";

Voici le code complet de la fonction en question

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
function loadMatiere(Promo)
{		

// Création du select 2 et d'une première option
// C'est ici qu'est le souci, selectTag.value renvoie du vide lors du onchange=""

	var selectTag = document.createElement('select');
	selectTag.setAttribute('name', 'matieres');
	selectTag.setAttribute('id', 'matieres');
	selectTag.setAttribute('onchange','alert("Valeur du sélecteur de matière :  '+selectTag.value+'")');
	var optionMatieres = document.createElement('option');
	optionMatieres.setAttribute('value', '0');
	optionMatieres.setAttribute('id', 'optionMatiere');
	var optionMatieresText = document.createTextNode('Matières');
	document.getElementById('classement').appendChild(selectTag);
	selectTag.appendChild(optionMatieres);
	optionMatieres.appendChild(optionMatieresText);
	
// Chargement du XML généré en PHP

	xhr_object.onreadystatechange = function()
	{ 
	if(xhr_object.readyState == 4)
		{
		if(xhr_object.responseXML.getElementsByTagName('id').length>0)
			{
			
// Création d'une option par matière depuis les données XML

			for(var i=0 ; i <= xhr_object.responseXML.getElementsByTagName('id').length ; i++)
				{
				var optionTag = document.createElement('option');
				var optionTagText = document.createTextNode(xhr_object.responseXML.getElementsByTagName('nom')[i].firstChild.data);
				
// Ici je donne sa valeur à l'option, qui une fois choisie devrait donner sa valeur au select... mais je n'arrive pas à récupérer cette valeur...

				optionTag.setAttribute('value', xhr_object.responseXML.getElementsByTagName('id')[i].firstChild.data);
				selectTag.appendChild(optionTag);
				optionTag.appendChild(optionTagText);
				}
			}

// Au cas où le XML est vide

		else
			{
			var noMatieres = document.createElement('option');
			var noMatieresText = document.createTextNode('Aucune matière');
			noMatieres.setAttribute('value', '0');
			noMatieres.setAttribute('disabled', 'disabled');
			selectTag.appendChild(noMatieres);
			noMatieres.appendChild(noMatieresText);
			}
		}
	}
	
// Requête XMLHttpRequest

	xhr_object.open ('GET', 'ressources_reponseXML.php?req=classement&parentid='+Promo, true);
	xhr_object.send (null);
}