Liste déroulante qui affiche une image

Invité · 09/04/2014, 11h44

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

) pour ceux qui auraient l’amabilité de m'aider

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

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
 
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 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
		</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&egravele</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 ?

Liste déroulante qui affiche une image

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager