afficher au choix une liste deroulante

Version imprimable

Salut à tous,

J'ai un petit souci en javascript, je ne maitrise pas. J'ai dans un formulaire une liste deroulante et j'aimerais que lorqu'on choisi le bouton radio oui j'ai la liste deroulante corespondant au oui et si on choisit non j'ai la liste deroulante au non.

Voici mon code ::
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <INPUT TYPE=RADIO NAME="status" ID="status_ID" VALUE="0" />oui <INPUT TYPE=RADIO NAME="status" ID="status_ID" VALUE="1" />non  <SELECT NAME="prod" ID="ID" > <OPTION VALUE='1'>yooo <OPTION VALUE='2'>djoo </SELECT>  <SELECT NAME="prod" ID="ID2" > <OPTION VALUE='6'>foo <OPTION VALUE='7'>goo </SELECT>
Merci

Bonjour,

Si votre page n'est pas déjà alourdie par plein d'objets, et que vos listes ne sont pas trop grandes, vous pouvez jouer sur l'affichage des listes.

Pour les utiliser, vous devez créer une fonction Javascript qui au onclick des boutons radio va afficher une liste plutôt que l'autre.
Code:

1 2 3 <INPUT TYPE=RADIO NAME="status" ID="status_ID" VALUE="0" onclick="ma_fonction(this.value);" />oui <INPUT TYPE=RADIO NAME="status" ID="status_ID" VALUE="1" onclick="ma_fonction(this.value);" />non
La fonction prend en paramètre le value du bouton sélectionné:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ma_fonction(la_valeur) { if(la_valeur == 0) { //Afficher liste oui, cacher liste non } else { //Cacher liste oui, afficher liste non } }

Voici un exemple assez basique
Tu as juste à copier le code et à le coller dans une page html pour le tester

Code:

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
 
<html>
<head>
<script>
function ChoixList(value) {
if(value == 0)
   {
    document.getElementById("MyList").innerHTML = '<SELECT NAME="prod" ID="ID" >'
   + '<OPTION VALUE="1">yooo'
   + '<OPTION VALUE="2">djoo'	
   + '</SELECT>';
   }
   else
   {
    document.getElementById("MyList").innerHTML = '<SELECT NAME="prod" ID="ID2" >'
    + '<OPTION VALUE="6">foo'	
    + '<OPTION VALUE="7">goo'
    + '</SELECT>';
   }
}
</script>
</head>
<body>
<div id="MyInput">
<INPUT TYPE=RADIO  NAME="status" ID="status_ID" VALUE="0"  onclick="ChoixList(this.value);" />oui
<INPUT TYPE=RADIO  NAME="status" ID="status_ID" VALUE="1"  onclick="ChoixList(this.value);" />non
</div>
<div id="MyList">
/* div d affichage de la liste en fonction du choix */
</div>
</body>

15/10/2009, 19h11
liquideshark

Super ca marche super bien,

Dites moi si je veus integrer un peu d'ajax ca va donner quoi ?

Merci
16/10/2009, 08h11
vermine

Je ne suis pas d'accord avec SPACHFR. Utiliser innerHTML au lieu de l'API DOM pour construire les éléments HTML n'est pas très bien. :roll:

Quant à Ajax, si vous l'utilisez, c'est pour aller chercher la liste du select dans une base de données, par exemple. Si la liste est dans la page (en dure), je ne vois pas à quoi l'Ajax servirait. Sinon ça donnerait plus ou moins la même chose. Vous appelleriez une fonction au onclick() sur les boutons radio; cette fonction ferait un appel Ajax qui irait récupérer telle ou telle liste de données, transmettrait le résultat et vous devrez alors construire votre select grâce à ces données. Mais... pas avec un innerHTML, essayez d'utiliser des createElement() de DOM.

Pour l'Ajax, vous pouvez parcourir cet article-ci.
Pour l'API DOM, voici quelques explications.