Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Bouton radio --> afficher une liste déroulante.

Bouton radio --> afficher une liste déroulante.

3 réponses
Avatar
stock_fluxy
Bonjour,

Je cherche =E0 afficher une liste selon le bouton radio coch=E9.
Je n'ai aucune id=E9e de comment mettre cela en place en javascript.
Je r=E9cup=E8re les donn=E9es de la liste d=E9roulante depuis une base
mysql fonction affGroupes() & affSalles().
Les listes sont r=E9cup=E9r=E9s mais je n'arrive pas =E0 afficher celle que
je souhaite en fonction du bouton radio selectionner.
Si quelqu'un peut m'aider...
Merci


echo "<form name=3D\"formCalSemaine\" action=3D\"$PHP_SELF\">";
echo "<tr>\n"
=2E"<td>"
=2E"<input type=3D\"radio\" name=3D\"view\" value=3D\"groupe\"
onClick=3D\"activerGroupe()\">Groupes"
."</td>";
echo "<td>";
//affGroupes();
echo "</td>\n"
."</tr>\n";
echo "<tr>\n"
=2E"<td>"
=2E"<input type=3D\"radio\" name=3D\"view\" value=3D\"Salle\"
onClick=3D\"activerSalle()\">Salles</td>\n"
=2E"<td>";
//affSalles();
echo "</td>\n"
=2E"</tr>\n"
=2E"</table>\n"
."</div>\n";
Signaler un problème avec ce contenu

3 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
ASM

Bonjour,

Je cherche à afficher une liste selon le bouton radio coché.
Je n'ai aucune idée de comment mettre cela en place en javascript.


Bon, ton php va créer les listes
chaque liste est dans un div positionné(*) et stylé en hidden
au click sur un bouton radio tu passes la liste de ton choix en visible

Attention !
si le JavaScript n'est pas activé chez le visiteur -> pas de liste du
tout !

<style type="text/css">
.groupe { visibility: hidden; }
</style>
<script type="text/javascript">
function activerGroupe(leGroupe) {
var G = document.forms['lesGroupes']
// cacher les selects de classe 'groupe'
for(var i=0;i<G.length;i++)
if(G[i].className=='groupe') G[i].style.visibility = 'hidden';
// montrer le select choisi
G.elements[leGroupe].style.visibility = 'visible';
}
</script>

<form name="lesGroupes" id="lesGroupes" action= blabla >
<p>Groupe A : <input name="groupes" type=radio value="1"
onclick="activerGroupe('groupe_A');">
Groupe B : <input name="groupes" type=radio value="1"
onclick="activerGroupe('groupe_B');">
Groupe C : <input name="groupes" type=radio value="1"
onclick="activerGroupe('groupe_C');">
<p><select name="groupe_A" id="groupe_A" class="groupe">
<option ... etc ... etc ...
</select>
<select name="groupe_A" id="groupe_A" class="groupe">
<option ... etc ... etc ...
</select>
<select name="groupe_A" id="groupe_A" class="groupe">
<option ... etc ... etc ...
</select></p>
</form>

(*) on peut tenter d'avoir tous les selects superposés

.groupe { display: block; position: absolute; top:0; left: 0;
visibility: hidden; }



--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
stock_fluxy
Merci, je n'avais pas pensé aux CSS.
Le problème que j'ai maintenant c'est que les boutons radio reste
toujours sélectionner ??!!

Je transmet mon code interprété en HTML par FireFox :

<html>
<head>
<title>Gestion Centre Formation</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css" TITLE="none ">
<Content-type: image/png>
</head>
<body>
<h1>MENU</h1>

<table class="header">
<tr>
<td><a href="menu.php?choix="><img src="img/insert.png"
align="center" alt="Insertion" title="Insertion"/></a></td>
<td><a href="modifiTable.php?choix="><img src="img/modif.png"
align="center" alt="Modification" title="Modification"/></a></td>
<td><a href="calAnnu.php"><img src="img/cal2.png" align="center"
alt="Calendrier" title="Calendrier"/></a></td>
</tr>
<tr>
<td><h2>Module d'insertion</h2></td>

<td><h2>Module de modification</h2></td>
<td><h2>Calendrier Annuel</h2></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function activerView(view) {
var G = document.forms['selViews']
// cacher les selects de classe 'groupe'
for(var i=0;i<G.length;i++)
if(G[i].className=='cssView') G[i].style.visibility = 'hidden ';
// montrer le select choisi
G.elements[view].style.visibility = 'visible';
}
</script>

<h1>Février</h1><div class="rubriqueMenu"><table>
<form name="selViews" id="selViews"
action="/Projet/site/new/calSemaine.php"><tr>

<td><input type="radio" name="groupe"
onClick="activerView('groupes')">Groupes</td><td><select name="groupes"
class="cssView"><option value=""> </option>
<option value="1">Informatique</option>
<option value="2">Communication</option>
<option value="3">Culturel</option>
<option value="4">Jesaispas</option>
</select>
</td>
</tr>
<tr>
<td><input type="radio" name="salle"
onClick="activerView('salles')">Salles</td>

<td><select name="salles" class="cssView"><option value=""> </option>
<option value="1">205</option>
<option value="3">409</option>
<option value="4">12</option>
</select>
</td>
</tr>
</table>
</div>
<input type="hidden" value="1" name="idMois" /><input type="hidden"
value="Février" name="mois" /><input type="hidden" value="14"
name="jour" /><input type="hidden" value="1" name="posJour"
/><h2>Visualisation de l'emploi du temps par : </h2>
Avatar
stock_fluxy
Scusé moi,

après une dure journée, c'est difficile, visé un peu les nom qui
difère du bouton radio.
Bien joué boulet.

++