afficher au choix une liste deroulante

**liquideshark** · 15/10/2009, 13h37

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 :

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
 
 
 
<INPUT TYPE=RADIO  NAME="status" ID="status_ID" VALUE="0"  />oui
<INPUT TYPE=RADIO  NAME="status" ID="status_ID" VALUE="1"  />non
 
<!-- liste oui-->
<SELECT NAME="prod" ID="ID" >
    <OPTION VALUE='1'>yooo
    <OPTION VALUE='2'>djoo
</SELECT>
 
<!-- liste non-->
<SELECT NAME="prod" ID="ID2"  >
    <OPTION VALUE='6'>foo
    <OPTION VALUE='7'>goo
</SELECT>

Merci

**vermine** · 15/10/2009, 14h55

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 :

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

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 :

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

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
   }
}

**SPACHFR** · 15/10/2009, 18h29

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

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
 
<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>

**liquideshark** · 15/10/2009, 20h11

Super ca marche super bien,

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

Merci

**vermine** · 16/10/2009, 09h11

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.

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.

afficher au choix une liste deroulante

JavaScript

Discussions similaires

Partager

Partager