Discussion :

[enrico83600]

Bonjour,

je souhaite un menu déroulant dans mon site. J'ai donc pris sur le net le script qu'une bonne ame a bien voulu donner

Ce script marche si je fais quelque chose de simple comme cela :

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
<!-- DEBUT DU SCRIPT MENU DEROULANT--> 
<p><form NAME="menu"> 
<div align="center"><center><p>
 
<select NAME="popup" 
onChange="change_site();" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- Biochimie -</option> 
<option VALUE="index.html"> -index</option> 
</select>
 
<select NAME="popup" 
onChange="change_site();" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- Microbiologie -</option> 
<option VALUE="acceuilcalculs.html"> -calculs </option>
</select>
 
</p>  
</center></div>
</form> 
<script> 
function change_site() { 
var site = document.menu.popup.selectedIndex; 
{ 
window.location.href = 
document.menu.popup.options[site].value; 
} 
} 
</script> 
</p> 
<!-- FIN DU SCRIPT MENU DEROULANT-->

Sous Wampserver, quand je click sur le "index" de mon menu déroulant, il m'amene bien à ma page index.html (je crois l'avoir testé en ligne aussi et ca marche, avec ke bon chemin d'acces biensur)

Cependant je souhaite créer sur la meme ligne plusieurs menu déroulant, j'ai donc modifier mon code comme ceci :

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
 <!-- DEBUT DU SCRIPT MENU DEROULANT--> 
<p><form NAME="menu"> 
<div align="center"><center><p>
 
<select NAME="popup" 
onChange="change_site();" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- Biochimie -</option> 
<option VALUE="index.html"> -index</option> 
</select>
 
<select NAME="popup" 
onChange="change_site();" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- Microbiologie -</option> 
<option VALUE="acceuilcalculs.html"> -calculs </option>
</select>
 
</p>  
</center></div>
</form> 
... blablabla

Le fait de rajouter ce nouvel onglet déroulant me fait tout péter : quand je click sur le "index" qui marchait tout a l'heure, la il ne marche plus...

Quel erreur de synthaxe ai je fais ? Ou bien le script n'est pas adapté pour plusieurs onglets déroulant ?

Merci

[enrico83600]

Bon, je viens d'apporter des modifs, j'ai reussi a faire marche mais avec un gros bug, donc pour les connaisseurs je pense que vous verrez vite l'erreur (moi j'connais pas trop le javascript...)

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
<script> 
function change_site() { 
var site = document.menu1.popup.selectedIndex; 
{ 
window.location.href = 
document.menu1.popup.options[site].value; 
}  
} 
</script> 
<script> 
function change_site() { 
var site = document.menu2.popup.selectedIndex; 
{ 
window.location.href = 
document.menu2.popup.options[site].value; 
} 
 
} 
</script> 
 
 
 
<p><form NAME="menu1"> 
<div align="center"><center><p>
<select NAME="popup" 
onChange="change_site();" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- test -</option> 
<option VALUE="acceuilcalculs.html"> -test1</option> 
</select>
</p>  
</center></div>
</form> 
 
<form NAME="menu2"> 
<div align="center"><center><p>
<select NAME="popup" 
onChange="change_site();" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- test -</option> 
<option VALUE="acceuilcalculs.html"> -test2</option> 
</select>
</p>  
</center></div>
</form>

Donc la j'ai créé 2 onglets de menu deroulant avec 1 script chacun, et le seul qui marche et celui dans la form "menu2".

Mais je me suis apercu que si dans mon code source je fait passer le <script> du menu1 apres celui du menu2, seul mon menu deroulant test1 marche.

Donc en gros, seul mon dernier <script> est pris en compte. Comment faire pour que les 2 marchent ? Merci

[andry.aime]

Salut,
Tu as 2 fois la fonction change_site(). Tu n'as qu'à mettre en paramètre l'élément cible.

Code JAVASCRIPT :

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

function change_site(obj) {window.location.href = obj.options[obj.selectedIndex].value; }

Code HTML :

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
<p><form NAME="menu1"> 
<div align="center"><center><p>
<select NAME="popup" 
onChange="change_site(this);" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- test -</option> 
<option VALUE="acceuilcalculs.html"> -test1</option> 
</select>
</p>  
</center></div>
</form> 
 
<form NAME="menu2"> 
<div align="center"><center><p>
<select NAME="popup" 
onChange="change_site(this);" style="background-color:teal; color:yellow" size="1"> 
<option VALUE>- test -</option> 
<option VALUE="acceuilcalculs.html"> -test2</option> 
</select>
</p>  
</center></div>
</form>

[enrico83600]

Bien bien, bravo, ca marche super.

Merci