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