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