Bonjour à tous,

Je travaille sur un projet web qui utilise Zend et jQuery.

J'ai créé un code utilisant jQuery pour créer dynamiquement une liste déroulante (voir label "Personne concernée (*)) à partir de 3 saisies de l'utilisateur : une liste déroulante "Qualité civile" (Mr, Mlle, Mme), un champ "Nom" et un champ "Prénom". Par ailleurs, cette liste déroulante est générée par clonage lorsqu'on clique sur un bouton (voir label "Ajouter une ressource").

Ce code fonctionne avec Firefox mais engendre des erreurs sous IE...
Entre autres, voici celle qui me gêne dans mon projet (car j'en ai moins dans mon projet que dans cet exemple allégé !) : la liste déroulante prend bien les modifications une fois qu'on a sélectionné la personne dedans mais pas dans la liste qui se déroule dessous (désolée pour la formulation).
Et c'est là que j'ai besoin de votre aide..

Je vous joins le code à coller dans une page html. Pour que cela fonctionne, il faut ajouter le fichier "jquery-1.7.1.min.js" à l'endroit indiqué et également prévoir une image nommée "plus.png" à coller au même niveau que la page html (par exemple sur votre bureau).

Merci beaucoup pour votre aide.


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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
  <head>
    <meta content="text/html; charset=ISO-8859-15" http-equiv="Content-Type">
    <title>Exemple</title>
    <style type="text/css">
    </style>
  </head>
  <body>
 
 
<SCRIPT type="text/javascript">  
/*! jQuery v1.7.1 jquery.com | jquery.org/license
//coller ici le fichier "jquery-1.7.1.min.js"
*/
 
  function construitListePersonnes(){
//on récupère qualité civile,nom et prénom de la personne
	var qualite_dem = "";
	var nom_dem = "";
	var prenom_dem = "";
	if("" != $("#persp_cqciv").val() && undefined != $("#persp_cqciv").val()){
		qualite_dem = $("#persp_cqciv").val();
		if("" != $("#persp_nom").val() && undefined != $("#persp_nom").val()){
			nom_dem = $("#persp_nom").val();
			if("" != $("#persp_prenom").val() && undefined != $("#persp_prenom").val()){
				prenom_dem = $("#persp_prenom").val();
			}
		}
	}
 
	var tab_pers = new Array();
	if("" != qualite_dem && undefined != qualite_dem && "" != nom_dem && undefined != nom_dem && "" != prenom_dem && undefined != prenom_dem){
		demandeur = qualite_dem + " " + nom_dem + " " + prenom_dem;
		tab_pers[0] = demandeur;
	}
 
	var compteur_pers = $("#compteur_pers").val();
	var qualite_cotit = "";
	var nom_cotit = "";
	var prenom_cotit = "";
 
	for(var i = 1; i <= compteur_pers; i++){
		if("" != $("#persp_cqciv_cotit_" + i).val() && undefined != $("#persp_cqciv_cotit_" + i).val()){
			qualite_cotit = $("#persp_cqciv_cotit_" + i).val();
			if("" != $("#persp_nom_cotit_" + i).val() && undefined != $("#persp_nom_cotit_" + i).val()){
				nom_cotit = $("#persp_nom_cotit_" + i).val();
				if("" != $("#persp_prenom_cotit_" + i).val() && undefined != $("#persp_prenom_cotit_" + i).val()){
					prenom_cotit = $("#persp_prenom_cotit_" + i).val();
				}
			}
		}
		if("" != qualite_cotit && undefined != qualite_cotit && "" != nom_cotit && undefined != nom_cotit && "" != prenom_cotit && undefined != prenom_cotit){
			  tab_pers[i] = qualite_cotit + " " + nom_cotit + " " + prenom_cotit;
		}
	}
	return tab_pers;
}
 
function genereUnCombo(compteur, id_select){
	//on récupère le tableau contenant la personne (qualité civile,nom et prénom)
	var tab_pers = construitListePersonnes();
  //première entrée du combo : vide
	var indice =  $(compteur).val();
	$('<option />', {value: "", label: "", text: ""}).appendTo($(id_select + indice));
  //on construit la liste déroulante avec le tableau de "qualité nom prénom"
	for(var val in tab_pers){
			$('<option />', {value: val, label: tab_pers[val], text: tab_pers[val]}).appendTo($(id_select + indice));
	}
}
 
function regenereUnTypeCombo(compteur, id_select){  
  //on récupère le tableau contenant la personne (qualité civile,nom et prénom)
	var tab_pers = construitListePersonnes();
 
	var indice =  $(compteur).val();
		for(var j = 1; j <= indice; j++){
			//on supprime ce qui se trouve entre les balises <select>	
		  $(id_select + j).empty();
		  //première entrée du combo : vide
			$('<option />', {value: "", label: "", text: ""}).appendTo($(id_select + j));
			//on regénère les listes déroulantes avec le tableau de "qualité nom prénom"
			 for(var val in tab_pers){
					$('<option />', {value: val, label: tab_pers[val], text: tab_pers[val]}).appendTo($(id_select + j));
			}
		}
}
 
var j = 0;
var tab_ressources = new Array();
// Fonction pour cloner chaque ensemble d'éléments
function duplique(element, compteur){	
/* ***********************RESSOURCES*************************/
	if("#cadre_ressources" == element){
		if (0 == j || 0 == tab_ressources.length)
			dernier_element = element;
		else
			dernier_element = element + '_' + tab_ressources[tab_ressources.length - 1];
 
			j++;	
			$(compteur).val(j);	 
			tab_ressources.push(j);
 
			$(dernier_element).after($(element).clone(true).each(function(index){
				$(this).attr('id', $(this).attr('id') + "_" + j);
			}));
 
			$(element + "_" + j + " *").each(function(){
				if (typeof($(this).attr('id'))!='undefined'){
					$(this).attr('id', $(this).attr('id') + "_" + j);
				}
				if (typeof($(this).attr('name'))!='undefined'){
					$(this).attr('name', $(this).attr('name') + "_" + j);
				}
			});
 
			$(element + "_" + j).show();	
	}
}
 
function regenereLesCombos(){ 
	regenereUnTypeCombo('#compteur_ressources', '#clires_cpersp_', false);
} 
</SCRIPT> 
 
 
 
  <!-- Compteur Personnes-->
    <input id="compteur_pers" type="text" style="display: none;" value="1" name="compteur_pers"><br>
  <!--LISTE DEROULANTE QUALITE CIVILE-->
    <label class="optional" for="persp_cqciv">Qualité civile (*) :</label>
    <select id="persp_cqciv" onchange="regenereLesCombos();" title="Qualité civile du demandeur principal" name="persp_cqciv">
      <option selected="selected" label="" value=""></option>
      <option label="Monsieur" value="M.">Monsieur</option>
      <option label="Mademoiselle" value="Melle">Mademoiselle</option>
      <option label="Madame" value="Mme">Madame</option>
    </select>
    <br>
  <!-- CHAMP NOM-->
    <label class="optional" for="persp_nom">Nom (*) :</label>
    <input id="persp_nom" type="text" onblur="regenereLesCombos();" maxlength="36" title="Nom de famille du demandeur principal" value="" name="persp_nom">
    <br>
  <!-- CHAMP PRENOM-->
    <label class="optional" for="persp_prenom">Prénom (*) :</label>
    <input id="persp_prenom" type="text" onblur="regenereLesCombos();" maxlength="36" title="Prénom du demandeur principal" value="" name="persp_prenom">
    <br>
  <!-- FIELDSET Ressources--> 
    <fieldset id="ressources">
      <legend id="" >Vos ressources mensuelles</legend>
      <!-- Bouton "Ajouter"-->
      <img title="ajouter_personne" alt="ajouter une personne" onclick="duplique('#cadre_ressources', '#compteur_ressources'); genereUnCombo('#compteur_ressources', '#clires_cpersp_', false);" style="cursor:pointer;" src="plus.png">
      <label class="optional" for="label_ajouter_ressource">Ajouter une ressource</label>
 
      <!-- Compteur ressources-->
      <input id="compteur_ressources" type="text" style="display: none;" value="" name="compteur_ressources">
 
      <!-- Modèle pour le clonage des Ressources-->
      <div id="cadre_ressources" style="display: none;">  
          <!-- Liste déroulante "Personne concernée par la ressource"-->         
          <label class="optional" for="clires_cpersp">Personne concernée (*) :</label>
          <select id="clires_cpersp" title="Personne percevant cette ressource" name="clires_cpersp" > </select>
      </div>
    </fieldset>
  </body>
</html>