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 ?

Invité · 09/04/2014, 15h18

Bon après plusieurs essais il faudrait que je réussisse a faire un mixt entre ces deux codes la... vous avez peut être une idée ?

Donc quand je clic sur : "PEUGEOT" puis sur "106 (09/1991 - 03/1996)" il faudrait que ca affiche IMAGE1.

Ca :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

et ca :

Code html :

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

1
2
3
4
5
6
7
8
9
<select onChange="document.getElementById('coucou').src=this.value">
<option value="">Choisissez ! 
</option>
<option value="IMAGE1"selected>PIECE1</option>
<option value="IMAGE2">PIECE2</option>
<option value="IMAGE3">PIECE3</option>
</select>
 <img id ='coucou' src ='IMAGE1'>
<br>

**NoSmoking** · 09/04/2014, 22h09

Bonjour,
as tu regardé du coté de la

Comment lier deux listes déroulantes entre elles ?

**Bovino** · 10/04/2014, 08h52

Mouais... sauf qu'avant de vouloir manipuler des listes déroulantes en JavaScript, il est important de savoir les coder correctement en HTML, ce qui ne semble pas être le cas.
Il existe des règles concernant ce que peuvent contenir ou non certaines balises et il faut respecter ces règles.

Liste déroulante qui affiche une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager