Discussion :

[Xeuch]

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

[NoSmoking]

Bonjour,
cette ligne

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

zone.onchange = RemplirSecondSelect(idAndNameDuSelect_1, idDivSecondSelect); //envoi du nom du 1er select et de l'id du div contenant le second select

est incorrecte, tu affectes le r�sultat de la fonction RemplirSecondSelect � l'�v�nement onchange qui lui attende la r�f�rence � une fonction.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
zone.onchange = function(){
  RemplirSecondSelect(idAndNameDuSelect_1, idDivSecondSelect);
};

[Xeuch]

Merci beaucoup noSmoking pour la r�ponse,

je n'ai plus cette erreur mais rien ne se passe quand je s�lectionne une option dans le premier select.
J'ai mis des alert() dans la fonction RemplirSecondSelect() mais elles ne s'affichent pas.

Merci de ton aide.

[Bovino]

C'est normal. Lorsque la fonction li�e au onchange se d�clenche, la fonction ajouterLigne() a fini son ex�cution et son contexte a disparu. Les variables que tu y as d�finies ne sont donc plus accessibles !

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
zone.id = idAndNameDuSelect_1;
zone.setAttribute("data-rel",idDivSecondSelect);
zone.onchange = function(){
    RemplirSecondSelect(this.id, this.getAttribute('data-rel'));
};

[Xeuch]

Merci beaucoup Bovino pour la r�ponse.

Ouais tu as bien raison j'en doutais , merciiii.

Cependant j'ai toujours pareil, je pense qu'il n'entre m�me pas dans le onchange() car m�me avec un alert simple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
 
var zone=document.createElement('select');
zone.id=idAndNameDuSelect_1;
zone.setAttribute("data-rel",idDivSecondSelect);
zone.setAttribute("name",idAndNameDuSelect_1);
zone.onchange = function(){
     alert('valeur changee');
    //RemplirSecondSelect(this.id, this.getAttribute('data-rel')); 
};

rien ne se passe quand je s�lectionne une valeur

Merci de ton aide

[NoSmoking]

Il faut que ton SELECT poss�de des OPTION pour qu'il puisse y avoir d�clenchement de l'�v�nement change.

[Xeuch]

Merci pour les reponses,
noSmoking ta remarque m'a amen� � la solution,
Enfait j'ai plac� le onchange() apres la reception des donn�es (apres le remplissage du premier select) et �a marche maintenant.
Ce qu'il ne fallait pas faire c'�tait de le l'attribuer au select au moment de la creation.
voici le programme complet qui pourrait aider quelqu'un un jour :

Je pr�cise que l'id�e de base �tait de cr�er dynamiquement � chaque fois que l'on clique sur un bouton une ligne (tr) contenant 2 selects dont l'un est rempli en fonction de la valeur de l'autre et des inputs et de l'inserer dans un tableau.

Code javaScript :

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
98
99
100
101
102
103
 
<script type='text/javascript'>	
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="selectDom"+nbLign; //concaténation pour creer nom premier select
	  var idDivSecondSelect="divOper"+nbLign;//creation de l'id du div contenant le second select pour l'envoyer s'il ya onchange
                var idNamSecondList="selectOper"+nbLign; //creation nom et id 2e select
	  div1_Name="div1"+nbLign;
 
	  var div = document.createElement('div'); //On créé une ligne
	  div.setAttribute('id',div1_Name);
 
	  var td = document.createElement('td');
	  var zone=document.createElement('select');
	  zone.id=idAndNameDuSelect_1;
	  zone.setAttribute("title",idDivSecondSelect);
	  zone.setAttribute("name",idAndNameDuSelect_1);
	  zone.style="min-width:50px;";
	  div.appendChild(zone);
	  td.appendChild(div);
	  tr.appendChild(td);
  }
 
	//CREATION DU SECOND SELECT
  if(i==1){
	  idAndNameDuSelectTypeOper="selectOper"+nbLign; //concaténation pour creer nom et id du 2em select
	  divOperName="divOper"+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{
	//Creation de mes inputs
  }
}
//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;
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById(div1_Name).innerHTML = leNouveauSelect;
	var myselect=document.getElementById(idAndNameDuSelect_1);
	myselect.onchange = function(){
	RemplirSecondSelect(this.id, idDivSecondSelect, idNamSecondList); 
  };
 }
}
//ENVOI DES DONNEES AU SERVEUR
xhr.open("POST","ajaxNouveauTypeOper.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("idAndNameDuSelect="+idAndNameDuSelect_1); //j'envoi lid du premier select		
}
 
 
function RemplirSecondSelect(idFirstSelect, idDivDuSeconSelect, idNomSecondSelect) {
  // recuperartion de la valeur selection dans le premier select 
 //et envoi au server pou remplir second select
}
</script>

Merci