Sélection liste déroulante puis affichage de text box

Version imprimable

06/11/2006, 16h22
dolu007

Sélection liste déroulante puis affichage de text box

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

Comme ça c'est bien?

Code:

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>

08/11/2006, 10h06
dolu007

Je pense qu'avec ceci je vais me débrouiller! Merci! Je vous tiens au courant
08/11/2006, 10h44
dolu007

2 pièce(s) jointe(s)

En fait je veux ça:

1) On choisit le modèle

Pièce jointe 6473

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)

Pièce jointe 6474

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

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
 
<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>

09/11/2006, 12h21
dolu007

1 pièce(s) jointe(s)

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 :

Pièce jointe 6523

Merci d'avance

Comme ça est ce que c'est correct?

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
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>

10/11/2006, 09h31
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

Voila

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
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>