Discussion :

[dolu007]

Bonjour,

Je souhaiterai afficher après selection d'un modèle dans la liste déroulante, la liste des tailles associées à ce modèle sous forme de boite de texte en dessous de la liste déroulante.

C'est à dire que s'affiche des boite de texte en fonction du modèle sélectionné!

Comprennez vous? Savez vous comment faire ?

Cordialement

[Lerin]

Comme ça c'est bien?

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
 
<SELECT NAME="selecteur" SIZE=3 onClick="afficherTexte(this.options[this.selectedIndex].value)">
	<OPTION VALUE="texte 1"> modèle 1
	<OPTION VALUE="texte 2"> modèle 2
	<OPTION VALUE="texte 3"> modèle 3
</SELECT>
 
<DIV id="boiteTexte"></DIV>
 
 
<SCRIPT language="javascript">
function afficherTexte (valeur) {
document.getElementById("boiteTexte").innerHTML = valeur
}
</SCRIPT>

[dolu007]

Je pense qu'avec ceci je vais me débrouiller! Merci! Je vous tiens au courant

[dolu007]

En fait je veux ça:

1) On choisit le modèle



2) En fonction du modèle sélectionné, apparaissent autant de textbox que de taille pour ce modèle (pour le nombre de text box, je le ferai avec du php)



Avez vous une idée de comment faire ça en javascript ?

[Lerin]

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
 
<SELECT NAME="selecteur" SIZE=3 onClick="afficherTexte(this.options[this.selectedIndex].value)">
	<OPTION VALUE="2/XS/M"> modèle 1
	<OPTION VALUE="5/XS/S/M/L/XL/XXL"> modèle 2
	<OPTION VALUE="3/M/XL/XXL"> modèle 3
</SELECT>
 
<DIV id="boiteTexte"></DIV>
 
 
<SCRIPT language="javascript">
function afficherTexte (valeur) {
document.getElementById("boiteTexte").innerHTML = "";
 
var tailles = valeur.substring(1, valeur.lenght)
 
tailles = tailles.split("/");
valeur = parseInt(valeur)
 
for (i = 1; i < valeur + 1; i++) {
document.getElementById("boiteTexte").innerHTML += tailles[i] + " : <input type='text' value=Qtée>  "
}
}
</SCRIPT>

[dolu007]

Oui c'est parfaitement ça que je voulais Lerin. Je voudrais par ailleurs rajouter une dimansion, c'est à dire, avoir la taille en entête de colonne, et la couleur en entête de ligne. Est ce possible Lerin.

ça donnerait :



Merci d'avance

[Lerin]

Comme ça est ce que c'est correct?

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
 
<SELECT NAME="selecteur" SIZE=3 onClick="afficherTexte(this.options[this.selectedIndex].value)">
	<OPTION VALUE="2/XS/M?bleu"> modèle 1
	<OPTION VALUE="5/XS/S/M/L/XL/XXL?vert/brun"> modèle 2
	<OPTION VALUE="3/M/XL/XXL?violet/jaune/gris/blanc/turquoise/noir"> modèle 3
</SELECT>
 
<br>
<br>
 
<DIV id="indicateur" style="height:140 px; width:240 px; border:1px solid;"></DIV>
<DIV id="tailleDispo"></DIV>
<DIV id="couleur"></DIV>
 
<SCRIPT language="javascript">
function afficherTexte (valeur) {
 
document.getElementById("tailleDispo").innerHTML = "";
 
var tllsClr = valeur.substring(2, valeur.length)
tllsClr = tllsClr.split("?");
tllsClr[0] = tllsClr[0].split("/");
tllsClr[1] = tllsClr[1].split("/");
 
document.getElementById("indicateur").innerHTML = tllsClr[0].length + " taille(s) :<br>" + tllsClr[0] + "<br><br>" + tllsClr[1].length + " couleur(s) :<br>" + tllsClr[1];
 
var inputs = "";
 
for (i = 0; i < tllsClr[0].length; i++) 
inputs += "<INPUT size='5' value='" + tllsClr[0][i] + "' > ";
 
var clr = "";
 
for (i = 0; i < tllsClr[1].length; i++)
clr += "<br>" + tllsClr[1][i] + " : " + inputs;
 
document.getElementById("tailleDispo").innerHTML += "<br>" + clr;
}
</SCRIPT>

[dolu007]

Alors là je vous dit bravo! C'est excellent.

Juste une question pour finir:
Comme je souhaite implémenter ça dynamiquement, je souhaiterais savoir si chaque textbox contenant les qtés par taille et coloris ont un identifiant unique?
Afin d'intégrer les valeurs saisies en base de données.

Merci

[Lerin]

Voila

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
 
<SELECT NAME="selecteur" SIZE=3 onClick="afficherTexte(this.options[this.selectedIndex].value)">
	<OPTION VALUE="2/XS/M?bleu"> modèle 1
	<OPTION VALUE="5/XS/S/M/L/XL/XXL?vert/brun"> modèle 2
	<OPTION VALUE="3/M/XL/XXL?violet/jaune/gris/blanc/turquoise/noir"> modèle 3
</SELECT>
 
<br>
<br>
 
<DIV id="indicateur" style="height:140 px; width:240 px; border:1px solid;"></DIV>
<DIV id="tailleDispo"></DIV>
 
<SCRIPT language="javascript">
var tllsClr;
 
// FONCTION principale.
function afficherTexte (valeur) {
// Remet à zero.
document.getElementById("tailleDispo").innerHTML = "";
compteur = 0;
 
// Divise et subdivise valeur pour avoir les tailles et couleurs.
tllsClr = valeur.substring(2, valeur.length)
tllsClr = tllsClr.split("?");
tllsClr[0] = tllsClr[0].split("/");
tllsClr[1] = tllsClr[1].split("/");
 
// Indique les informations dans la boite indicateur.
document.getElementById("indicateur").innerHTML = tllsClr[0].length + " taille(s) :<br>" + tllsClr[0] + "<br><br>" + tllsClr[1].length + " couleur(s) :<br>" + tllsClr[1];
 
// Boites texte à ajouter.
var inputs = "";
 
// Variable qui indique la couleur en debut de rangée.
var clr = "";
 
 
for (i = 0; i < tllsClr[1].length; i++) {
clr += "<br>" + tllsClr[1][i] + " : " + setId(inputs, tllsClr[1][i]);
}
 
// Affiche les couleurs et les boites texte.
document.getElementById("tailleDispo").innerHTML += "<br>" + clr;
}
 
var compteur = 0;
 
// ID unique FONCTION.
function setId (valeur, couleur) {
compteur = 0;
for (j = 0; j < tllsClr[0].length; j++) {
valeur += "<INPUT size='5' value='" + tllsClr[0][j] + "' id='" + couleur + compteur + "' > ";
 
// Pour voir les IDs -----
alert(compteur + couleur)
// -----------------------
 
compteur++;
}
return valeur;
}
</SCRIPT>