Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[DWMX] menu déroulant dynamique

2 réponses
Avatar
cedlannoy
Comment faire deux menus déroulants dynamique?
C'est a dire que le deuxieme se remplit en fonction du choix dans le
premier, le tout sans devoir raffaichir la page?

merci

ced

2 réponses

Avatar
Krystyan
grace à du javascript :

dans le <head>

<SCRIPT Language="JavaScript" >
function selectmenu(lesthemes)
{
if (lesthemes.theme.selectedIndex == 0)
{
alert('selectionnez d'abord un theme');
}
else{
window.top.location.href lesthemes.theme.options[lesthemes.theme.selectedIndex].value;
}}

menu=new Array()
menu[0]=new Array()
menu[1]=new Array()
menu[2]=new Array()

menu[0][0]=new Option("theme1","")
menu[0][1]=new Option("sstheme1_1","Http://www.tonlien.com/")
menu[0][2]=new Option("sstheme1_2","Http://www.tonlien.com/")

menu[1][0]=new Option("theme2","")
menu[1][1]=new Option("sstheme2_1","Http://www.tonlien.com/")
menu[1][2]=new Option("sstheme2_2","Http://www.tonlien.com/")

menu[2][0]=new Option("theme3","")
menu[2][1]=new Option("sstheme3_1","Http://www.tonlien.com/")
menu[2][2]=new Option("sstheme3_2","Http://www.tonlien.com/")

function fillList(z){
for (a=document.f.s.options.length-1;a>0;a--){document.f.s.options[a]=null}
for (a=0;a<menu[z].length;a++){document.f.s.options[a]=new
Option(menu[z][a].text,menu[z][a].value)
}
document.f.s.selectedIndex=0
}
</SCRIPT>

Dans le <body>

<FORM NAME=f>
<SELECT NAME="theme" SIZE=1 onChange="selectmenu(this.form)">
<OPTION selected VALUE="">-Theme Principal-
<OPTION VALUE="Javascript:fillList(0)">theme1
<OPTION VALUE="Javascript:fillList(1)">theme2
<OPTION VALUE="Javascript:fillList(2)">theme3
</SELECT>
<SELECT NAME=s style="width:250">
<OPTION VALUE="#">Selectionner D'abord Un Theme
</SELECT>
<INPUT TYPE=button
onclick="location=document.f.s.options[document.f.s.selectedIndex].value"
VALUE="Valider">
</FORM>

je te fourni le code complet car j'espere que tu le décortiqueras pour en
comprendre les bases, le principe est en fait très simple mais il est plus
facile de le comprendre quand on le voit en "direct" plutôt que d'expliquer
un pas-a-pas de méthodologie pour ton développement.
donc, pour comprendre facilement : regarde bien quelles sont les variables
utilisées, comment on relie le js présent dans le head et le formulaire,
remarque également que chaque élément est nommé (formulaire, liste ...)
voila.

après tu peux également initialiser le contenu des listes déroulantes en
rapport avec une base de données.
c'est un plus.


--
Krystyan
Avant de poser une question, lire (et comprendre) ceci :
http://faqmm.free.fr
Avatar
edemiollis
Et quand on veut que les options proviennent d'un requête Bdd..
comment cela se passe t-il ?
Merciiiiiii


"Krystyan" wrote in message news:<ckm7ce$lnu$...
grace à du javascript :

dans le <head>

<SCRIPT Language="JavaScript" >
function selectmenu(lesthemes)
{
if (lesthemes.theme.selectedIndex == 0)
{
alert('selectionnez d'abord un theme');
}
else{
window.top.location.href > lesthemes.theme.options[lesthemes.theme.selectedIndex].value;
}}

menu=new Array()
menu[0]=new Array()
menu[1]=new Array()
menu[2]=new Array()

menu[0][0]=new Option("theme1","")
menu[0][1]=new Option("sstheme1_1","Http://www.tonlien.com/")
menu[0][2]=new Option("sstheme1_2","Http://www.tonlien.com/")

menu[1][0]=new Option("theme2","")
menu[1][1]=new Option("sstheme2_1","Http://www.tonlien.com/")
menu[1][2]=new Option("sstheme2_2","Http://www.tonlien.com/")

menu[2][0]=new Option("theme3","")
menu[2][1]=new Option("sstheme3_1","Http://www.tonlien.com/")
menu[2][2]=new Option("sstheme3_2","Http://www.tonlien.com/")

function fillList(z){
for (a=document.f.s.options.length-1;a>0;a--){document.f.s.options[a]=null}
for (a=0;a<menu[z].length;a++){document.f.s.options[a]=new
Option(menu[z][a].text,menu[z][a].value)
}
document.f.s.selectedIndex=0
}
</SCRIPT>

Dans le <body>

<FORM NAME=f>
<SELECT NAME="theme" SIZE=1 onChange="selectmenu(this.form)">
<OPTION selected VALUE="">-Theme Principal-
<OPTION VALUE="Javascript:fillList(0)">theme1
<OPTION VALUE="Javascript:fillList(1)">theme2
<OPTION VALUE="Javascript:fillList(2)">theme3
</SELECT>
<SELECT NAME=s style="width:250">
<OPTION VALUE="#">Selectionner D'abord Un Theme
</SELECT>
<INPUT TYPE=button
onclick="location=document.f.s.options[document.f.s.selectedIndex].value"
VALUE="Valider">
</FORM>

je te fourni le code complet car j'espere que tu le décortiqueras pour en
comprendre les bases, le principe est en fait très simple mais il est plus
facile de le comprendre quand on le voit en "direct" plutôt que d'expliquer
un pas-a-pas de méthodologie pour ton développement.
donc, pour comprendre facilement : regarde bien quelles sont les variables
utilisées, comment on relie le js présent dans le head et le formulaire,
remarque également que chaque élément est nommé (formulaire, liste ...)
voila.

après tu peux également initialiser le contenu des listes déroulantes en
rapport avec une base de données.
c'est un plus.