Discussion :

[Chybro]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[emmanuel.remy]

Salut,

Tu inscris dans la création de la Select Matières:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

selectTag.setAttribute('onchange','alert("Valeur du sélecteur de matière :  '+selectTag.value+'")');

doncselectTag.value est évalué à ce moment , soit une valeur vide
Plutôt quelque chose comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

selectTag.setAttribute('onchange','alert("Valeur du sélecteur de matière :  "+this.options[this.selectedIndex].value+)');

même si je serai plus favorable à la pose d'un événement via un listener ou une manière "standard":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

selectTag.onchange = function() {alert("Valeur du sélecteur de matière :  "+this.options[this.selectedIndex].value); };

ERE