Onchange modifie la position Div

Version imprimable

Bonjour,

Je suis face à un probleme en javascript et je ne sais pas du tout comment m'y prendre ( je ne sais pas non plus si ce que je vais vous détailler ci-dessous est faisable )

Explication.

Je possède un Select :
Code:

1 2 3 4 5 <select id="monselect" size="1" onchange="selection('monselect',4);"> <option value="1-3-4-2" selected>choix1</option> <option value="1-2">choix2</option> <option value="1-4">choix3</option> </select>
Egalement des div
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div id="1" > Mon div 1 </div> <div id="2"> Mon div 2 </div> <div id="3"> Mon div 3 </div> <div id="4"> Mon div 4 </div>
Suivant mon choix je souhaiterais afficher

le "<div id="1" >" "<div id="3" > ...

dans value <option value="1-3-4-2" selected>choix1</option>

j'arrive à faire afficher le bloc 1, 3, 4, 2... Suivant la selection.

En gros je mets en hidden ou non les bloc div.

Cependant les bloc's s'affiche dans l'ordre des div de mon code.

En effet je verrais la div 1, 2, 3, 4 et non 1, 3, 4, 2

Vous me direz que c'est tout à fait normal. Mais est ce qu'il existe une fonction, un possibilité qu'elle s'affiche dans l'ordre paramétré dans le value.

J'espere que vous comprenez ce que je souhaite faire. Je reste à votre disposition si vous avez besoin de plus d'informations
Merci & A bientôt
Kilian

14/04/2010, 13h48
Bovino
Salut.

Puisqu'il s'agit d'afficher ou non des éléments dans un ordre donné, la solution que j'implémenterais à ta place serait d'affecter tes div à des variables :

Code:

var maDiv1 = document.getElementById('div1').cloneNode(true);

puis à chaque changement, vider l'élément englobant et ajouter chaque élément avec :

Code:

eltEnglobant.appendChild(divn);

dans une boucle sur le split du value du select :
Code:

1 2 3 4 5 6 var nbDiv = document.getElementById('monselect').value; var tabDiv = nbDiv.split('-'); var i=0; while(tabDiv[i++]){ eltEnglobant.appendChild(window['maDiv' + tabDiv[i]); }

Oula, je suis assez newbies en javascript, il faut que je vois comment on utilise "appendChild" comment cela fonctionne...

En ce moment ma fonction javascript ressemble à ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function selection(monselect,nombrediventout) { for (var i=1; i<=nombrediventout; i++) { document.getElementById(i).style.visibility='hidden'; document.getElementById(i).style.display='none'; } var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value var tableau=machaine.split('-'); for (var i=0; i<tableau.length; i++) { document.getElementById(tableau[i]).style.visibility='visible'; document.getElementById(tableau[i]).style.display='block'; } }
tu vois c'est assez bête cependant, l'ordre n'est pas pris en compte.

Je te remercie encore pour ta proposition et je vais essayer de la comprendre.

Merci et a +

A vrai dire, je suis un peu perdu, je m'excuse de revenir à la charge...

Voici ce que je propose ( cela ne fonctionne pas ) mais au moins tu pourras voir dans quelle direction je vais :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
   function selection(monselect,nombrediventout) {
 
	var maDiv1 = document.getElementById('1').cloneNode(true);
	var maDiv2 = document.getElementById('2').cloneNode(true);
	var maDiv3 = document.getElementById('3').cloneNode(true);
	var maDiv4 = document.getElementById('4').cloneNode(true);
	var maDiv5 = document.getElementById('5').cloneNode(true);
	var maDiv6 = document.getElementById('6').cloneNode(true);
 
 
	var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value
 
	var  tableau=machaine.split('-');
	for (var i=0; i<tableau.length; i++) {
 
		eltEnglobant.appendChild(window('maDiv' + tableau[i]));
 
	}
 
 
   }

Qu'est ce que "eltEnglobant" ? qu'est ce qu'il y a dans cette variable ?
Est ce que je suis à peu près bien parti par rapport à ce que tu me proposes.

Merci a+

-------Edit--------

Ma 2eme version du code, elle ne fonctionne pas mieux, mais je pense que j'ai un peu avancé :

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
function selection(monselect,nombrediventout) {
 
	var monnouvelelement = document.createElement('div');
 
	var maDiv1 = document.getElementById('1').cloneNode(true);
	var maDiv2 = document.getElementById('2').cloneNode(true);
	var maDiv3 = document.getElementById('3').cloneNode(true);
	var maDiv4 = document.getElementById('4').cloneNode(true);
	var maDiv5 = document.getElementById('5').cloneNode(true);
	var maDiv6 = document.getElementById('6').cloneNode(true);
 
 
	var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value
 
	var  tableau=machaine.split('-');
	for (var i=1; i<=tableau.length; i++) {
 
		monnouvelelement.appendChild(window('maDiv' + tableau[i]));
 
 
	}
 
 
   }

14/04/2010, 18h03
Gsnalf

il est interdit de mettre un nombre dans un id, l'id doit obligatoirement commencer par une lettre
15/04/2010, 11h14
kilian

Ok merci pour l'info, je vais voir pour modifier les noms id "num1"...
Cependant je pense qu'il y a encore autre chose qui "déconne" dans mon script.
A suivre, je vais essayer de chercher plus loin
a+

La suite de mon code, je commence vraiment à désespérer...

Voici l'erreur que j'obtiens dans FireFox :

Citation:

Erreur*: uncaught exception: [Exception... "Cannot convert WrappedNative to function" nsresult: "0x8057000d (NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN)" location: "JS frame :: file:///Nouvelles%20Docs/doc/index.html# :: selection :: line 84" data: no]
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function selection(monselect,nombrediventout) { var monnouvelelement = document.createElement('div'); var maDiv1 = document.getElementById('id1').cloneNode(true); var maDiv2 = document.getElementById('id2').cloneNode(true); var maDiv3 = document.getElementById('id3').cloneNode(true); var maDiv4 = document.getElementById('id4').cloneNode(true); var maDiv5 = document.getElementById('id5').cloneNode(true); var maDiv6 = document.getElementById('id6').cloneNode(true); var machaine = document.getElementById(monselect).options[document.getElementById(monselect).selectedIndex].value var tableau=machaine.split('-'); for (var i=1; i<=tableau.length; i++) { monnouvelelement.appendChild(window('maDiv' + tableau[i])); } }
Je ne sais plus quoi faire. Je vous serais vraiment très reconnaissant si vous arrivez à me donner un petit coup de pouce.

Merci bien
A bientot

EDIT :

La ligne 84 correspond : "monnouvelelement.appendChild(window('maDiv' + tableau[i]));"

Bonjour,

Il y a une incohérence dans le code de Bovino, que vous avez peut-être mal corrigé:
Code:

1 2 3 4 5 6 //Bovino eltEnglobant.appendChild(window['maDiv' + tabDiv[i]); //Vous monnouvelelement.appendChild(window('maDiv' + tableau[i]));
Je suppose que c'est:
Code:

1 2 monnouvelelement.appendChild(window['maDiv' + tableau[i]]);

16/04/2010, 13h07
kilian
Bonjour vermine,

J'ai corrigé ma faute, merci
Code:

1 2 3 4 for (var i=1; i<=tableau.length; i++) { monnouvelelement.appendChild(window['maDiv' + tableau[i]]); }
Cependant, ca n'arrange rien, c'est toujours pareil... snif.

Je me demande si je ne devrais pas changer de solution, car je ne vois pas du tout, je ne maitrise pas vraiment le JavaScript...

Dommage que Bovino ne passe pas par là, comme c'était lui qui m'avait proposé une solution.

Merci encore à tous pour votre aide
16/04/2010, 13h48
vermine
monnouvelelement, vous devez aussi l'inclure dans le document avec un appendChild:
Code:

1 2 quelque_chose.appendChild(monnouvelelement);
Et quelque chose, c'est un élément de la page (le formulaire ? Bref, l'endroit où vous voulez voir les div).

Citation:
Envoyé par vermine
Bonjour,

Il y a une incohérence dans le code de Bovino, que vous avez peut-être mal corrigé:
Code:

1 2 3 4 5 6 //Bovino eltEnglobant.appendChild(window['maDiv' + tabDiv[i]); //Vous monnouvelelement.appendChild(window('maDiv' + tableau[i]));
Je suppose que c'est:
Code:

1 2 monnouvelelement.appendChild(window['maDiv' + tableau[i]]);
Oui, bien vu ;)
Citation:
Envoyé par kilian
Bonjour vermine,

J'ai corrigé ma faute, merci
Code:

1 2 3 4 for (var i=1; i<=tableau.length; i++) { monnouvelelement.appendChild(window['maDiv' + tableau[i]]); }
Cependant, ca n'arrange rien, c'est toujours pareil... snif.

Je me demande si je ne devrais pas changer de solution, car je ne vois pas du tout, je ne maitrise pas vraiment le JavaScript...

Dommage que Bovino ne passe pas par là, comme c'était lui qui m'avait proposé une solution.

Merci encore à tous pour votre aide
Dans mon code, les variables maDivn doivent être déclarées comme globales (window['maDiv' + tableau[i]] affecte une variable à l'objet window), or dans ta fonction, tu les déclares en local ;)
Remplace le bloc
Code:

1 2 3 4 5 6 var maDiv1 = document.getElementById('id1').cloneNode(true); var maDiv2 = document.getElementById('id2').cloneNode(true); var maDiv3 = document.getElementById('id3').cloneNode(true); var maDiv4 = document.getElementById('id4').cloneNode(true); var maDiv5 = document.getElementById('id5').cloneNode(true); var maDiv6 = document.getElementById('id6').cloneNode(true);
par
Code:

1 2 3 4 var i = 0; while(document.getElementById('id' + ++i){ window['maDiv'+i] = document.getElementById('id' + i).cloneNode(true); }

19/04/2010, 08h25
kilian

Salut, tout le monde,
Je voudrai vous remercier pour votre aide par rapport à mon probleme ci-dessus.
Mais malgré vos aides, mes tests etc... je n'arrive vraiment pas à trouver la solution alors que toutes les informations sont sous mes yeux.
Toujours là même erreur.
Je ne veux pas vous déranger plus longtemps. Je vais essayer de trouver une alternative....
Merci encore à vous tous.
A+
Kilian