selection bouton radio +liste

**erox44** · 12/03/2008, 15h53

Salut , je suis en train de faire l'analyse concernant mon appli et je me demandais , dans un formulaire j'ai disons 4 boutons radio , serait-il possible que lorsque je selectionne l'un d'eux , ca active une liste deroulante en fonction de ce choix?

ex: boutons radio : RPG / MMORPG / shoot

si je selectionne MMORPG , la liste deroulante ne contient que WoW,GW
RPG ..............................................Golden sun,FF6
shoot ............................................... CS,quake

Au depart je pensais utiliser du AJAX mais mon maitre de stage n'est pas pour donc ....

**htr999** · 12/03/2008, 16h27

salut
tu peux faire un formulaire avec 3 input RADIO et un div vide, ajouter à tes 3 input l'event onClick="afficher()", et finalement la fonction afficher qui étend le code du div avec les options de SELECT respectives.
a+

**erox44** · 13/03/2008, 08h44

hum si c'etait possible d'avoir un bout de code comme exemple , je suis pas un pro du JS :/

**htr999** · 13/03/2008, 08h53

je te l'ai envoyé en message privé.

**erox44** · 13/03/2008, 10h58

hum tu as du te tromper car je n'ai rien

EDIT : voila le code qu'il m'a envoyé

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
<head>
<script type="text/javascript">
function afficher(valeur) {
	var code = "";
	divListe = document.getElementById('liste');
	if (document.formulaire.rpg.checked){
		code += '<select name="rpgList[]" multiple size="3">';
		code += '<option value="goldenSun">Golden Sun</option>';
		code += '<option value="ff6">FF6</option>';
		code += '</select>';
	}
	if (document.formulaire.mmorpg.checked){
		code += '<select name="mmorpgList[]" multiple size="3">';
		code += '<option value="wow">WoW</option>';
		code += '<option value="gw">GW</option>';
		code += '</select>';
	}
	if (document.formulaire.shoot.checked){
		code += '<select name="shootList[]" multiple size="3">';
		code += '<option value="cs">CS</option>';
		code += '<option value="quake">Quake</option>';
		code += '</select>';
	}
	divListe.innerHTML = code;
}
</script>
</head>
 
<body> 
<form name="formulaire" action="">
 
<table border=0><tr>
<td valign="top">
<label>	<input type="radio" name="groupBox" name="rpg" 	  id="rpg"    onclick="afficher();"/>RPG	  </label><BR/>
<label>	<input type="radio" name="groupBox" name="mmorpg" id="mmorpg" onclick="afficher();"/>MMORPG </label><BR/>
<label>	<input type="radio" name="groupBox" name="shoot"  id="shoot"  onclick="afficher();"/>SHOOT  </label><BR/>
</td>
<td valign="top">
<div id="liste"></div>
</td>
</tr></table>
 
</form>
</body>

Par contre ce code est adaptable si je vais chercher les données dans ma BDD?

**le_chomeur** · 13/03/2008, 11h11

De plus , nous sommes ici sur un forum d'aide et de partage , intérêt très limité d'envoyer une solution en privée à un problème demandé en public, qui pourrait aider d'autres personnes.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
	function ActiveListe(MyRadio){
 
		if(MyRadio.value == "1"){
			document.getElementById('listeDeroulante').style.visibility = "hidden";
			alert("Valeur : "+MyRadio.value+" donc on masque");
		}
		else{
			document.getElementById('listeDeroulante').style.visibility = "visible";
			alert("Valeur : "+MyRadio.value+" donc on montre");
		}
	}
</script>
</head>
 
<body>
<input type="radio" value="1" onchange="ActiveListe(this)" name="test" /> 1er <br />
<input type="radio" value="2" onchange="ActiveListe(this)" name="test" /> 2 <br />
<input type="radio" value="1" onchange="ActiveListe(this)" name="test" /> 3 <br />
<input type="radio" value="5" onchange="ActiveListe(this)" name="test" /> 4 <br />
<select id="listeDeroulante">
<option>tes options</option>
</select>
</body>
</html>

**htr999** · 13/03/2008, 11h21

sorry de ne pas avoir suivi le reglement

selection bouton radio +liste

JavaScript

Discussions similaires

Partager

Partager