affichage boutons radio dynamiques

**Balaton** · 21/11/2009, 18h47

J'aimerais faire la chose suivante :
dans un premier select, si la personne choisit voitures cela provoque l'affichge de 3 boutons radio (renault, peugeot, simca), si elle choisit moto affichage de 2 boutons radio (yamaha, harleydavidson);
pour l'instant je ne sais faire ça qu'en passant par une variable get en php.
pouvez-vous me donner la marche à suivre pour gérer cela intégralement en javascript?

Code :

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

1
2
3
4
<select name="marque" onChange="window.location.replace('mapage.php?type='+this.value);">
                        <option value="moto">Moto </option>
                        <option value="voiture">Voiture</option>
</select>

**sebhm** · 21/11/2009, 21h33

Bonjour,

le + simple pour commencer, 2 DIV existent (l'un avec les boutons radio 'voiture', l'autre avec les boutons radio 'moto').
par defaut, un des DIV est affiché (selon la valeur par defaut de ton select), l'autre est masqué. Par exemple avec le CSS

Code :

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

display : none

et lors du changement de valeur de ton select, tu affiches le DIV adéquat en javascript

Code :

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

document.getElementById('id_du_div_a_afficher').style.display='block';

et tu masques l'autre

**Balaton** · 22/11/2009, 01h12

Merci du tuyau Seb. J'ai essayé d'appliquer mais ça coince. Qu'est ce que j'ai raté encore ?

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
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<html>
	<head><title>Boutons radio dynamiques</title>
		<style type="text/css">
			<!--
 
			#un{
				display: block;
			}
			#deux{
				display: none;
			}
			-->
		</style>
		<style type="text/javascript">
			<!--
				var typevehic;
				function tourne(){
					typevehic=document.getElementById('type');
					if(typevehic.value=='moto'){
						document.getElementById('un').style.display='block';
						document.getElementById('deux').style.display='none';
					}
					if(typevehic.value=='voiture'){
						document.getElementById('un').style.display='none';
						document.getElementById('deux').style.display='block';
					}
				}
			-->
		</style>
	</head>
	<body >
		<select name="type" id="type" onChange="tourne();">
			<option value="moto" selected="selected">Moto </option>
        	<option value="voiture">Voiture</option>
		</select>
		<div id="un">
			<input type="radio" name="marques" id="1"/>Yamaha<br/>
			<input type="radio" name="marques" id="2"/>Harley Davidson<br/>
		</div>
		<div id="deux">
			<input type="radio" name="marques" id="3"/>Renault<br/>
			<input type="radio" name="marques" id="4"/>Peugeot<br/>
			<input type="radio" name="marques" id="5"/>Citron<br/>
		</div>
	</body>
</html>