Création d'un select personnalisé

Version imprimable

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:

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.

Bonjour,

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

Code:

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

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

18/02/2014, 08h23
Bovino
Code:

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 ! :aie:

Code:

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

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

Code:

var valeur = select.value;

ne te semble pas plus simple à écrire ?

Code:

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.

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:

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:

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