ajouter un onchange à un select crée en javascript pour remplir un autre select

Question

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



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;
//alert(nbLign);
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 



//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

Gigatrappeur · Answer

Bonjour,

le problème vient de la ligne ou tu assigne le gestionnaire de l'évènement "change" :
zone.onchange = RemplirSecondSelect(idAndNameDuSelect_1, idDivSecondSelect);

Essaye ça, à la place :

zone.onchange = (function (idAndNameDuSelect_1, idDivSecondSelect)
{
    return function () 
    {
        RemplirSecondSelect(idAndNameDuSelect_1, idDivSecondSelect);
    };
})(idAndNameDuSelect_1, idDivSecondSelect);


Cordialement,
Gigatrappeur

Ajouter un onchange à un select crée en javascript pour remplir un autre select

1 réponse

Votre réponse

Discussions similaires