Récupération des données liées à un Select

Version imprimable

10/11/2007, 14h14
lbrun79

Récupération des données liées à un Select

Bonjour,

J'ai dans un formulaire un champ "select" que j'alimente (id et libellé ) via PHP à partir d'une table de base donnée.

Je voudrais, lorsque je sélectionne un item de la liste, récupérer les informations liées à cet item. Je précise que j'ai toutes ces informations en base et que je les affiche toutes correctement lors du chargement de la première page.

En utilisant js, J'arrive bien à récuperer l'Id lors du changement d'item, mais afficher l'id dans la page ne réprésente que peu d'intérêt .. Pour les autres valeurs je ne vois pas comment faire .. il faut certainement alimenter au moment du chargement de la liste initiale, un tableau js et ensuite piocher dedans mais je ne sais si c'est possible et comment procéder.

Merci de votre aide.

Laurent

Si j'ai bien compris, vous alimentez un input "select" par une base de données PHP et vous souhaitez récuperer les valeurs dans un script...

Tu peux étudier ce code (regarde les commentaires que j'ai mis) :

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
 
<form name="form">
<select name="madb">
<option name="test1">test1</option>
<option name="test2">test2</option>
<option name="test3">test3</option>
<option name="test4">test4</option>
</select>
</form>
<script language="javascript">
<!--
madb=new Array()
i=0
while(i!=document.form.madb.options.length)
{
madb[i]=document.form.madb.options[i].text
i++
}
 
/* ET A PARTIR DE LA ON A madb[0] C'EST L'OPTION
test1, madb[1] C'EST L'OPTION test2, etc...
ON PEUT TESTER EN METTANT PAR EXEMPLE :*/
alert(madb[2]) // CE QUI VA DONNER: test3
//-->
</script>

11/11/2007, 16h15
lbrun79

Bonjour,

Merci pour ta réponse. En fait ce n'est pas tout-à-fait ce que je voulais faire..

Je voulais sur sélection d'un item dans une liste faire varier, en live, à l'affichage les informations liées à cet item (genre sur sélection d'un modele de véhicule, afficher sa marque, sa puissance, sa cylindrée, etc...) sans biensur devoir aller chercher ces infos en base à nouveau ..

Ce que je pense qu'il faut faire c'est constituer un ou plusieurs tableaux JS (qui contiendrait toutes ces infos précédentes) au moment ou je constitue les choix de mon select (dans PHP donc).

Ensuite sur le onchange de mon véhicule, lire dans les ou les tableaux JS les informations liées pour le nouveau véhicule et les afficher.

Ce que je ne sais pas, c'est si cette solution est viable et correcte et si c'est faisable. Il y a peut-être d'autres solutions plus simples..

Merci

Laurent

Ouf! Enfin fini avec ce fichu code.
Vous pouvez l'etudier pour faire ce que vous voulez (encore une fois, si j'ai bien compris.)

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
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
<form name="form">
<select name="CARS1" onchange="goto2()" size=4>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Citroen">Citroen</option>
<option value="Porsche">Porsche</option>
</select>
<div id="cars2">
<select name="CARS2" onchange="goto3()" size=4>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
<div id="cars3">
<select name="CARS3" size=4 onchange="test4()">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
<script language="javascript">
function changeCARS2(x,text1) {
document.form.CARS2.options[x].text=text1
document.form.CARS2.options[x].value=text1
}
function changeCARS3(x,text1) {
document.form.CARS3.options[x].text=text1
document.form.CARS3.options[x].value=text1
}
function goto2() {
if(document.form.CARS1.value=="") {
alert("Vous avez selectionne une mauvaise option.")
}
if(document.form.CARS1.value=="Renault") {
changeCARS2(0,"Renault_Option1")
changeCARS2(1,"Renault_Option2")
changeCARS2(2,"Renault_Option3")
}
if(document.form.CARS1.value=="Peugeot") {
changeCARS2(0,"Peugeot_Option1")
changeCARS2(1,"Peugeot_Option2")
changeCARS2(2,"Peugeot_Option3")
changeCARS2(3,"Peugeot_Option4")
}
if(document.form.CARS1.value=="Citroen") {
changeCARS2(0,"Citroen_Option1")
}
if(document.form.CARS1.value=="Porsche") {
changeCARS2(0,"Porsche_Option1")
changeCARS2(1,"Porsche_Option2")
}
document.getElementById("cars2").style.visibility="visible" 
document.form.CARS1.disabled=true
}
 
 
 
 
function goto3() {
if(document.form.CARS2.value=="") {
alert("Vous avez selectionne une mauvaise option.")
return false }
if(document.form.CARS2.value=="Renault_Option1")
{
changeCARS3(0,"Renault_Option1_Option1")
changeCARS3(1,"Renault_Option1_Option2")
}
if(document.form.CARS2.value=="Renault_Option2")
{
changeCARS3(0,"Renault_Option2_Option1")
}
if(document.form.CARS2.value=="Renault_Option3")
{
changeCARS3(0,"Renault_Option3_Option1")
changeCARS3(1,"Renault_Option3_Option2")
}
 
if(document.form.CARS2.value=="Peugeot_Option1")
{
changeCARS3(0,"Peugeot_Option1_Option1")
changeCARS3(1,"Peugeot_Option1_Option2")
}
if(document.form.CARS2.value=="Peugeot_Option2")
{
changeCARS3(0,"Peugeot_Option2_Option1")
changeCARS3(1,"Peugeot_Option2_Option2")
changeCARS3(2,"Peugeot_Option2_Option3")
}
if(document.form.CARS2.value=="Peugeot_Option3")
{
changeCARS3(0,"Peugeot_Option3_Option1")
}
if(document.form.CARS2.value=="Peugeot_Option4")
{
changeCARS3(0,"Peugeot_Option4_Option1")
changeCARS3(1,"Peugeot_Option4_Option2")
}
 
if(document.form.CARS2.value=="Citroen_Option1")
{
changeCARS3(0,"Citroen_Option1_Option1")
changeCARS3(1,"Citroen_Option1_Option2")
changeCARS3(2,"Citroen_Option1_Option3")
}
if(document.form.CARS2.value=="Porsche_Option1")
{
changeCARS3(0,"Porsche_Option1_Option1")
changeCARS3(1,"Porsche_Option1_Option2")
changeCARS3(2,"Porsche_Option1_Option3")
}
if(document.form.CARS2.value=="Porsche_Option2")
{
changeCARS3(0,"Porsche_Option2_Option1")
changeCARS3(1,"Porsche_Option2_Option2")
}
document.form.CARS2.disabled=true
document.getElementById("cars3").style.visibility="visible"
}
 
function test4() {
if(document.form.CARS3.value=="") {
alert("Vous avez selectionne une mauvaise option.")
}
else
{
alert("Vous avez selectionne "+document.form.CARS3.value+".")
}
}
 
document.getElementById("cars2").style.visibility="hidden"
document.getElementById("cars3").style.visibility="hidden"
</script>