Discussion :

[loeca]

allo! j'aimerai faire un select avec une liste déroulante et Lorsque l'utilisateur fait un choix dans une des listes, l'image correspondante est affichée immédiatement à sa droite et le prix de l'item est affiché à droite de l'image. le hic c'est que je doit le faire rien qu'en JavaScript . mais j'ai essayer plein d'astuce mais ca n'affiche pas l'image et le prix ou ya just une image qui s'affiche mais elle ne change pas.je vous montre mon code javaScript

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
var entree=document.getElementById("entree")
im1 = new Image();
im2 = new Image();
 
im1.src = "/images/escargot.jpg";
im2.src = "/images/salade.jpg";
im3.src = "/images/lasagne.jpg";
im4.src = "/images/spaghetti.jpg";
img1.height=150 ;
img1.width=150 ;
function chargerEntree(this_select)
{
 
var entree = document.getElementById("entree");
entree.options[0]=new Option("choisir",00);
entree.options[1]=new Option("Salade",5.95);
entree.options[2]=new Option("Escargot",4.95);
 
 
var repas = document.getElementById("repas");
repas.options[0]=new Option("choisir",00);
repas.options[1]=new Option("spaghetti",5.95);
repas.options[2]=new Option("lasagne",4.95);
 
}
 
function changeImage(select) {
  var valeur = select.options[select.selectedIndex].value;
  document.getElementById("entree").src = valueToImage[valeur];
}

je rappel que en html mon select doit être vide j'ai pas le droit de mettre une option a l’intérieur de ma balise.besoin d'aide svp.

[Golgotha]

Bonjour,

En partant de ton code, j'ai fait un exemple fonctionnel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<select id="animal" onchange="changeImage(this)"></select> <br>
<img src="" id="animal_img"/>
<div id="animal_num"></div>

Code js :

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
valueToImage = { 
Kangaroo : "http://www.freephotobank.org/d/19544-2/Kangaroo-009.jpg",
Canard : "http://www.freephotobank.org/d/150-4/bird1.jpg",
Chat : "http://www.freephotobank.org/d/1178-4/cat2.jpg"
 
};
 
 
function chargerEntree()
{
 
var entree = document.getElementById("animal");
entree.options[0]=new Option("choisir",00);
entree.options[1]=new Option("Kangaroo", 1);
entree.options[2]=new Option("Canard", 2);
entree.options[3]=new Option("Chat", 3);
 
}
 
function changeImage(select) {
  var valeur = select.options[select.selectedIndex].text;
  var num =  select.options[select.selectedIndex].value; 
  document.getElementById("animal_img").src = valueToImage[valeur];
    document.getElementById("animal_num").innerHTML = "numéro : " + num;
}
 
 
chargerEntree();

Tu peux tester ça ici : http://jsfiddle.net/6LH7k/1/

Je pense que le code parle de lui même, c'est assez simple mais si tu as des questions n'hésite pas.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function changeImage(select) {
  var valeur = select.options[select.selectedIndex].value;
  document.getElementById("entree").src = valueToImage[valeur];
}

Ah oui, quand même... 2 lignes, 2 erreurs !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var valeur = select.options[select.selectedIndex].value;

Bon... c'est pas exactement une erreur, plutôt une grosse maladresse.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var valeur = select.value;

ne te semble pas plus simple à écrire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("entree").src = valueToImage[valeur];

Là en revanche, ça semble être une erreur...
Si on en croit ton code, l'élément entree est un <select>, donc pas une image et ne possède pas d'attribut src.

[loeca]

Golgotha j'ai essayé de revoir avec ton code mais ca ne marche pas .je pense que ca une relation avec le chargement web

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onload

que je dois obligatoirement utilisé, et <span id=X> pour afficher le prix.avec ton code mon select devient vide. au fait c'est un TP.donc je suis un peu limité sur certaine chose .je vous montre mon code html

Code html :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML>
<HEAD>
<TITLE> selection de repas</TITLE>
<meta charset="UTF-8">
<style type"text/css" >
h1
{
color:blue;
text-align:center;
}
h2
{
color:red;
text-align:top;
}
h3
{
color:green;
text-align:right;
font-style:italic;
}
h3.titre
{
color:green;
text-align:center;
font-style:italic;
}
p.uppercase
{text-transform:uppercase;}
 
P.capitalize
{text-transform:capitalize;}
div.gauche {
    float:left;
    width:60%;
}
div.droite {
    margin-left:60%
}
</style>
</HEAD>
<head>
<script type="text/javascript" src="tp.js">
 
 
</script>
</head>
 
 
<body onLoad="chargerEntree();">
 
 
 
<P>Votre Choix:</P>
</h3>
<div class="gauche">
<form>
Entree
<select id="entree" name="entree" onChange="chargerEntree()">
 
</select>
</form>
</div>
<div class="droite">
<form>
Repas
<select id="repas" name="repas" onChange="chargerRepas()">
</select>
<img id="entree" alt="" src="" />
</form>
</div>
 
 <A HREF="#" onMouseover="chargerEntree('image1',escargot.src)"
 onMouseout="changeImage('escargot',im1.src)" >
 <IMG NAME="escargot" HEIGHT=150 SRC="escargot.jpg" WIDTH=150 BORDER=0>
</A>
 
</body>
</HTML>

il se peut qu'il ait des erreurs j'ai telement fait de changement que je suis un peu perdu dans mon code