Liste déroulante qui affiche une image
Bonjour,
Je début en HTML/javascript et j'aimerais faire une liste conditionnelle qui affiche une image une fois les deux choix remplis.
Je m'explique plus en détail, j'ai une liste qui permet de chercher une marque de voiture. L'autre qui affiche le modèle de voiture, pas de problème pour lier ces deux listes. Mais une fois que le deuxième choix fait j'aimerais afficher plusieurs images en fonction du modèle choisi.
Voila mon code (je l'espère pas trop moche :x) pour ceux qui auraient l’amabilité de m'aider :)
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
| !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test voitures</title>
<style>
body
{
margin:2em;
font-family:Verdana;
font-size:100%
}
label
{
display:inline-block;
width:10em;
}
select
{
width:15em;
font-family: Verdana;
}
</style>
<script type="text/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
31
32
33
34
|
var categories = [];
categories["startList"] = ["RENAULT", "PEUGEOT","CITRO\313N"
categories["RENAULT"] = ["Cherokee (09/1984 - 01/1993)","Jeep (05/1982 - 01/1993)"," ","Avantime (09/2001 -03/2003)"];
categories["PEUGEOT"] = ["106 (09/1991 - 03/1996)","106 - Restyling (03/1996 - 07/2003)"," ","107 (06/2005 - 02/2012)"];
categories["CITRO\313N"] = ["Berlingo I Utilitaire (07/1996 - 12/2002)","Berlingo I Multispace (07/1996 - 12/2002)"];
var nLists = 2;
function fillSelect(currCat,currList)
{
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++)
{
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat)
{
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init()
{
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); |
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
| </script>
<body>
<form name="tripleplay" action="">
<p>
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<p id="List1" style="font-size:35px;"></p>
<option selected>Choisir une marque</option>
</select>
</p>
<p>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Choisir un modèle</option>
</select>
</p>
<p>
<table>
<tbody>
<tr>
<td>
<td><a class="catalogue" target="_self" href="URL1"><img src="IMAGE1" hspace="0" border="0" vspace="0" width="70"></a></td>
<td style="text-align: left;"><a class="catalogue" target="_self" href="URL1"><span class="catalogue">Batteries<br></span></td>
</td>
<td>
<td><a class="catalogue" target="_self" href="URL2"><img src="IMAGE2" hspace="0" border="0" vspace="0" width="70"></a></td>
<td style="text-align: left;"><a class="catalogue" target="_self" href="URL2"><span class="catalogue">Eclairage<br></span></td>
</td>
</tr> |
J'avais pensé à faire une liste de if et donc à mettre une variable sur chaque catégorie mais c'est long non ?
