[AJAX] Ajouter un onchange à un select créé en javascript pour remplir un autre select
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:
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:
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
