rafraichir le contenu des select

Version imprimable

Salut,
j'ai deux listes de select : liste1 et liste2. liste1 est composé de plusieurs select: s01,s02,s03,s04 et liste2 est aussi composée de plusieurs select : s11,s12,s13,s14.
Les valeurs de select s11 dépend de la valeur choisie de s01 (à l'aide de l'attribut onchange)
de même pour s12 et s02, pour s13 et s03 et pour s14 et s04. Les select de la lite1 possèdent la même liste de valeurs.
jusqu'au là tout va bien. Le problème apparait dans l'étape suivante. J'ai mis à coté de chaque select de la liste1 un checkbox; si on séléctionne ce chekbox le choix de la select courante sera appliqué pour toutes les select qui suivent et par conséquent les valeurs des select de la liste2 changent suivant la valeur choisie, mon problème est : juste la première et la dernière select de la liste2 changent de valeurs.
un exemple :
supposons que les select s01,s02,s03 et s04 contiennent une liste d'entreprises(E1,E2,E3) et les select s11,s12,s13 et s14 contiennent la liste des employés de l'entreprise correspondent ; si je choisis E3 pour s01 et je clique sur le checkbox devant s01 donc E3 sera sélectionné pour s02,s03 et s04 et par conséquence les employés de E3 apparaissent dans s11,s12,s13 et s14 alors que pour le moment ils apparaissent juste dans s11 et s14

voila la fonction que j'appelle lors du clic sur le checkbox
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 function appliquerChoix(obj){ //alert("hi"); if(obj.checked==true){ var ok = confirm("Appliquer ce choix pour toutes les lignes suivantes?"); if(ok){ var index = obj.id.lastIndexOf(";"); var selectedline = obj.id.substring(index+1); var nom = obj.id.substring(0,index); var nbrline = document.getElementById("nbr").value; var selectedoption = document.getElementById(nom+selectedline).selectedIndex; //alert(nbrline); //selectedline=selectedline+1; var currentline = parseInt(selectedline)+1; for(var i=currentline;i<nbrline;i++){ //alert(nom+";"+i); var myselect=document.getElementById(nom+i); myselect.selectedIndex= selectedoption;//.options[selectedoption].selected=true; document.getElementById(nom+";"+i).checked=true; myselect.onchange(); } } } }

30/07/2010, 10h30
E.Bzz

Bonjour,
je n'aurais pas mis de ";" dans les id.
Pas sûr que ça soit formellement interdit, mais ça peut poser des problèmes suivants les syntaxes employées.

Sinon, en cas de fonctionnement chaotique, il faut penser au bug de la fonction parseInt() (et autres fonctions math) :

Code:

var currentline = parseInt(selectedline, 10)+1;

Dans le cas où la base (généralement 10) n'est pas précisée, c'est le nav qui la "déduit" :aie: en fonction du 1° paramètre.
Et comme, c'est bien connu, le nav est blagueur, il lui arrive (souvent) de préférer l'octal au décimal :mrgreen:

Bref, par sûr que ça soit la solution, mais une correction serait préférable pour écarter l'hypothèse (y/c à l'avenir) ;)

A+

merci pour la proposition mais elle ne change rien:
j'ai remplacé ";" par "-" et j'ai ajouté

Code:

var currentline = parseInt(selectedline,10)+1;

mais toujours juste la première select et la dernière de la liste2 qui se rafraichissement.
Le truc bizarre c'est que si j'ajoute un alert dans le boucle comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 for(var i=currentline;i<nbrline;i++){ //alert(nom+";"+i); var myselect=document.getElementById(nom+i); //for (var i=0; i<myselect.options.length; i++){ myselect.selectedIndex= selectedoption;//.options[selectedoption].selected=true; document.getElementById(nom+"-"+i).checked=true; alert(i); myselect.onchange(); }
toutes les select de la liste2 se rafraichissent.

30/07/2010, 11h09
E.Bzz

Citation:

Envoyé par ja1985va

Le truc bizarre c'est que si j'ajoute un alert dans le boucle comme suit :
...
toutes les select de la liste2 se rafraichissent.

As-tu essayé d'appeler le onchange() via un setTimeout() (avec un timer de 10ms, par ex.) ?

A+

oui j'ai essayé via le code suivant :

Code:

1
2
3
4
5
6
7
8
9
for(var i=currentline;i<nbrline;i++){
			//alert(nom+";"+i);
 
			var myselect=document.getElementById(nom+i);
			//for (var i=0; i<myselect.options.length; i++){
			 myselect.selectedIndex= selectedoption;//.options[selectedoption].selected=true;
			 document.getElementById(nom+"-"+i).checked=true;
			 setTimeout("getEmployees('"+i+"')",500);
			 }

mais toujours pas de nouvelle .
j'ai aussi essayé d'utiliser une fonction wait que je l'ai definie :

Code:

1
2
3
4
5
6
7
8
9
10
function wait(time)
{
   d=new Date();
   diff=0;
    while(diff < time)
    {
      n=new Date();
      diff=n-d;
     } 
}

et je l'ai utilisée dans la boucle:

Code:

1
2
3
4
5
6
7
8
9
10
for(var i=currentline;i<nbrline;i++){
			//alert(nom+";"+i);
 
			var myselect=document.getElementById(nom+i);
			//for (var i=0; i<myselect.options.length; i++){
			 myselect.selectedIndex= selectedoption;//.options[selectedoption].selected=true;
			 document.getElementById(nom+"-"+i).checked=true;
			 wait(100);
                         myselect.onchange();
			 }

aussi n'a aucun effet

ca pourra peut etre t'aider:

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
<select id="l1"><option selected name="val1">val</option><option name="val2">val2</option></select><input type="checkbox" id="c1"/>
<select id="l2"><option selected name="val1">val</option><option name="val2">val2</option></select><input type="checkbox" id="c2"/>
<select id="l3"><option selected name="val1">val</option><option name="val2">val2</option></select><input type="checkbox" id="c3"/>
<select id="l4"><option selected name="val1">val</option><option name="val2">val2</option></select><input type="checkbox" id="c4"/>
 
<br/>
<br/>
<select id="l11"><option name="val1">val</option><option name="val2">val2</option></select>
<select id="l12"><option name="val1">val</option><option name="val2">val2</option></select>
<select id="l13"><option name="val1">val</option><option name="val2">val2</option></select>
<select id="l14"><option name="val1">val</option><option name="val2">val2</option></select>
 
<script>
 
	for(var i=1;i<=4;i++){
		document.getElementById("l"+i).onchange= function(){
			idx = this.id.match(/l([1-4])/)[1];
			majListe( "l1"+idx , this.value );
		}
		document.getElementById("c"+i).onchange= function(){
			idx = this.id.match(/c([1-4])/)[1];
			if( this.checked == true )
				majAllLists( document.getElementById("l"+idx).value );
		}
	}
 
	function majListe( selectID , valeur ){
		document.getElementById( selectID ).value = valeur;//remmplacer cette ligne par le script qui charge les options de l1X en fonction de la valeur de lX
	}
 
	function majAllLists( valeur ){
		for(var i=1;i<=4;i++){
			majListe( "l1"+i , valeur );
		}
	}
 
</script>

comme j'ai pas compris grand chose à ton code (c'est vrai que j'ai pas vraiment cherché...) je suis reparti d'un mes bouts de script. Avec jquery, ça serait certainement encore plus simple.

04/08/2010, 10h34
ja1985va

Salut gael,

Franchement g pas bien compris votre code mais je l'ai testé tel qu'il est et j'ai pas obtenu le résultat souhaité.
Merci en tout cas

dwr : plusieurs appels usccessif à une fonction

Salut,

j'ai localisé le bug du javascript. J'utilise l'api DWR(Direct Web Remoting) pour le rafraichissement des select et voilà les fonctions que j'utilise:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function getEmployees(indice){ indicep = indice; // alert("indicep="+indicep); var selectedent = dwr.util.getValue("idEnt"+indice); DWRtool.getEmployeesByEnt(selectedent,displayEmployees); } function displayEmployees(data) { // alert("idEmp"+indicep); dwr.util.removeAllOptions("idEmp"+indicep); dwr.util.addOptions("idEmp"+indicep,[' ']); dwr.util.addOptions("idEmp"+indicep, data,'idEmp','nom'); }
le onchange() des select de la liste1 fait appel à getEmployees(indice).
la variable "indicep" fait différencier entres les select de la liste2.
Dans notre exemple, on a 4 select pour la liste1 et la liste2 donc si onclique sur le checkbox de la première select s01 la fonction getEmployees(indice) va être appelée 4 fois , de même pour la fonction displayEmployees(data); donc on appelle getEmployees(indice) puis displayEmployees(data) 4 fois, cependant les fonctions displayEmployees(data) sont appelées après avoir appelées toutes les fonctions getEmployees(indice) et comme ça la varaible indicep va prendre l'indice de la dernière select et c'est pour celà j'ai juste la première select et la dernière de la liste2 qui se rafraichissement.
j'espère que c'est clair.