Bonjour les pro du web!

j'ai crée 2 select dynamiquement en JavaScript et je les rajoute dans le dom.

Je rempli le premier select après création ( avec Ajax)

Je j'ai ensuite ajouter l'attribut onchange() à ce premier select pour remplir automatiquement le second selon la valeur du premier.

Cependant lorsque j'essai de récupérer dans ma fonction de remplissage du second select la valeur sélectionnée dans le premier select j'obtient l'erreur :

Impossible d’obtenir la propriété « options » d’une référence null ou non définie

ainsi je sélectionne un option du premier select , rien ne se passe

Quelqu'un pourrais me dire s'il vous plait ce qui ne va pas ?

voici mon code :

code de création des deux select

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
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
 
function ajouterLigne(tableau)
{
	tableau = document.getElementById(tableau);
	//Calcul du nombre de cellule par ligne dans le tableau -> on regarde combien il y a de td dans le premier tr
	var tds = tableau.getElementsByTagName('tr')[0].getElementsByTagName('th').length;
 
	//recuperation du comteur
	nbLign =+document.getElementById('leCompteur').innerHTML;
	var inputNam;
	var tr= document.createElement("tr");
 
	for(var i=0;i<tds;i++)
	{
	//CREATION DU PREMIER SELECT
	if(i==0)
	{
		idAndNameDuSelect_1="select1"+nbLign; //concaténation pour creer nom premier select
		var idDivSecondSelect="div2"+nbLign; //creation de l'id du div contenant le second select pour l'envoyer s'il ya onchange
		div1_Name="div1"+nbLign;
 
		var div = document.createElement('div'); 
		div.setAttribute('id',div1_Name);
 
		var td = document.createElement('td');
		var zone=document.createElement('select');
 
	              zone.setAttribute("id",idAndNameDuSelect_1);
	              zone.setAttribute("name",idAndNameDuSelect_1);
		zone.onchange = RemplirSecondSelect(idAndNameDuSelect_1, idDivSecondSelect); //envoi du nom du 1er select et de l'id du div contenant le second select
		zone.style="min-width:50px;";
 
		div.appendChild(zone);
		td.appendChild(div);
		tr.appendChild(td);
	}
	//CREATION DU SECOND SELECT
	if(i==1)
            {
		idAndNameDuSelectTypeOper="select2"+nbLign; //concaténation
		divOperName="div2"+nbLign; //nom du div contenant le 2e select
 
		var div = document.createElement('div'); //On créé une ligne
		div.setAttribute('id',divOperName);
 
		var td = document.createElement('td');
		var zone=document.createElement('select');
 
		zone.setAttribute("id",idAndNameDuSelectTypeOper);
		zone.setAttribute("name",idAndNameDuSelectTypeOper);
	              var option=document.createElement('OPTION');
		option.value=-1;
		option.text="choisir domaine en premier"
		zone.appendChild(option);					
		zone.style="min-width:50px;";
 
		div.appendChild(zone);
		td.appendChild(div);
		tr.appendChild(td);
	}
 
	else{
	      .......
	     ......
	}
}
//Incrementer le compteur et remettre sa valeur dans le span
       nbLign++;
       document.getElementById('leCompteur').innerHTML=nbLign;
 
     //On ajoute la ligne créée au tableau
    if(tableau.firstChild.tagName == 'TBODY'){ // si IE
	tableau.firstChild.appendChild(tr);
   }
   else{ //Sinon
	tableau.appendChild(tr);
    }
 
//TRAITEMENT DE REMPLISSAGE DU PREMIER SELECT APRES SA CREATION
    var xhr = getXhr();
 
//RECEPTION DES DONNEES
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
	leNouveauSelect = xhr.responseText;
	document.getElementById(div1_Name).innerHTML = leNouveauSelect; // remplissage du premier select
	}
}
 
//ENVOI DES DONNEES AU SERVEUR
 
// methode post
  xhr.open("POST","ajaxRemplissagePremierSelect.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("idAndNameDuSelect_1="+idAndNameDuSelect_1);		
 
}
code fonction remplissage second select


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
 
//fonction appelé pour remplir second select en fonction   de la valeur du premier
function RemplirSecondSelect(idFirstSelect, idDivDuSeconSelect)
{
	var xhr = getXhr();
	alert(idFirstSelect);
	alert(idDivDuSeconSelect);
	//RECEPTION DES DONNEES
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
		leselect = xhr.responseText;
		document.getElementById(idDivDuSeconSelect).innerHTML = leselect;
	}
}
 
//ENVOI DES DONNEES AU SERVEUR
xhr.open("POST","ajaxRemplirSecondSelect.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
//recuperation de la valeur selectionnee dans le premier select
select1 = document.getElementById(idFirstSelect);
valeurSelectionnee = select1.options[select1.selectedIndex].value;
xhr.send("valeurSelectionnee="+valeurSelectionnee);
 
}

Merci de votre aide