Se connecter avec
S'enregistrer | Connectez-vous

Plusieurs listes déroulantes qui affichent une seule image

Dernière réponse : dans Programmation

Bonjour,

De nombreux sujets portent sur les listes déroulantes et la fonction onChange() mais aucun n'a pu résoudre totalement mon problème.

En effet, j'ai réalisé plusieurs listes déroulantes qui possèdent toutes les mêmes champs, j'ai attribué à chaque champs un lien vers une image spécifique puis la fonction javascript onChange() m'affiche l'image correspondante.

J'ai alors à gauche mes listes déroulantes et à droite l'image qui s'affiche.
Dès que je clique sur l'un des champs de l'une des listes déroulantes, je voudrais que l'image correspondante s'affiche à droite. Il n'y aurait donc toujours qu'une seule image qui s'affiche!

Voici mon code :
  1. <script LANGUAGE="JavaScript">
    

  2. var current = 0;
    

  3. function change(){
    

  4. current=document.formname.place.selectedIndex;
    

  5. document.images.show.src = document.formname.place[current].value;}
    

  6. </script>
    

  7.  
  8. ...
    

  9.  
  10. <form name="formname">
    

  11.  
  12. <select name="place" onChange="change();">
    

  13. <option value="vide.png" selected="selected">Sélectionner</option>
    

  14. <option value="img1.jpg">Champ1</option>
    

  15. <option value="img2.jpg">Champ2</option>
    

  16. </select>
    

  17.  
  18. <select name="place" onChange="change();">
    

  19. <option value="vide.png" selected="selected">Sélectionner</option>
    

  20. <option value="img1.jpg">Champ1</option>
    

  21. <option value="img2.jpg">Champ2</option>
    

  22. </select>
    

  23.  
  24. </form>
    

  25.  
  26. ...
    

  27.  
  28. <img src="vide.png" name="show">

Si cette fonction s'exécute correctement pour une seule liste déroulante, elle ne fonctionne plus pour plusieurs.
D'où ma question : Est-il possible de n'afficher qu'une seule image avec une même fonction mais pour plusieurs listes déroulantes ?

Autres pages sur : plusieurs listes deroulantes affichent seule image

Lassé par la pub ? Créez un compte

KangOl a dit :
tu comprends au moins le code que tu executes ?

parce que là, tous tes <select> ont le meme nom...

Bien sûr que je comprends. Justement, si j'ai mis le même nom, c'est pour que ce soit la même fonction qui s'exécute.

Parce que j'ai essayé de changer de "name" dans "select" (un "name" différent pour chaque select) et faire autant de fonctions qu'il y a de select mais ça ne fonctionne pas non plus dès lors qu'on exécute une fonction semblable !! :??: 

Ceci ne fonctionne pas non plus :
  1. <script LANGUAGE="JavaScript">
    

  2. var current = 0;
    

  3. function change(){
    

  4. current=document.formname.rang.selectedIndex;
    

  5. document.images.show.src = document.formname.rang[current].value;
    

  6.  
  7. current=document.formname.place.selectedIndex;
    

  8. document.images.show.src = document.formname.place[current].value;}
    

  9. </script>
    

  10.  
  11. ...
    

  12.  
  13. <form name="formname">
    

  14.  
  15. <select name="place" onChange="change();">
    

  16. <option value="vide.png" selected="selected">Sélectionner</option>
    

  17. <option value="img1.jpg">Champ1</option>
    

  18. <option value="img2.jpg">Champ2</option>
    

  19. </select>
    

  20.  
  21. <select name="rang" onChange="change();">
    

  22. <option value="vide.png" selected="selected">Sélectionner</option>
    

  23. <option value="img1.jpg">Champ1</option>
    

  24. <option value="img2.jpg">Champ2</option>
    

  25. </select>
    

  26.  
  27. </form>
    

  28.  
  29. ...
    

  30.  
  31. <img src="vide.png" name="show">


Si quelqu'un trouve une solution, je suis preneur !!! :bounce: 

Merci d'avance

et si tu passais l'element a la fonction ??

  1. function change(what) {
  2.   document.getElementById("show").src = what.value;
  3. }

  1. <select onchange="change(this);">
  2. <option value="vide.png" selected="selected">Sélectionner</option>
  3. <option value="img1.jpg">Champ1</option>
  4. <option value="img2.jpg">Champ2</option>
  5. </select>
  6. <img src="vide.png" id="show">


et les "name" c'est fini :o  faut passer par l'id (qui est unique !)

J'ai essayé de m'inspirer de ce qui est inscrit pour faire mes modifications sur mon site. Car je veux aussi avoir deux listes déroulante, mais je n'y arrive pas. Et j'ai essayé avec l'ID au lieu du FORM NAME


Dans le HEAD j'ai ça :
function Lien() {
i = document.Choix.Liste.selectedIndex;
if (i == 0) return;
url = document.Choix.Liste.options.value;
parent.location.href = url;
}

Et dans mon body :
<FORM NAME="Choix">
<SELECT NAME="Liste" onChange="Lien()">
<OPTION VALUE="">Choisir une option
<OPTION VALUE="../../copains.html">Les copains
<OPTION VALUE="../../plongee/index.html">La plongée
<OPTION VALUE="http://www.google.com">Recherche
</SELECT>
</FORM>

Après modification selon la réponse proposé, j'ai tenté cela, mais en vain :

Dans la head :
<SCRIPT language="JavaScript">

function Lien(what) {
document.getElementById("show" ).src = what.value;
}

function Lien() {
i = document.Choix.Liste.selectedIndex;
if (i == 0) return;
url = document.Choix.Liste.options.value;
parent.location.href = url;
}
</script>

Dans le body :
<select onchange="Lien(this)" name="Liste"> <option>Choisir une option </option>
<option value="../../copains.html">Les copains </option>
<option value="../../..plonge/index.html">La plongée</option>
<OPTION VALUE="http://www.google.com">Recherche
/SELECT>

PRISE II AVEC LA FONCTION CODE

J'ai essayé de m'inspirer de ce qui est inscrit pour faire mes modifications sur mon site. Car je veux aussi avoir deux listes déroulante, mais je n'y arrive pas. Et j'ai essayé avec l'ID au lieu du FORM NAME


Dans le HEAD j'ai ça : 
  1. function Lien() { 
    

  2. i = document.Choix.Liste.selectedIndex; 
    

  3. if (i == 0) return; 
    

  4. url = document.Choix.Liste.options[i].value; 
    

  5. parent.location.href = url; 
    

  6. }


Et dans mon body : 
  1. <FORM NAME="Choix"> 
    

  2. <SELECT NAME="Liste" onChange="Lien()"> 
    

  3. <OPTION VALUE="">Choisir une option 
    

  4. <OPTION VALUE="../../copains.html">Les copains 
    

  5. <OPTION VALUE="../../plongee/index.html">La plongée 
    

  6. <OPTION VALUE="<a href="http://www.google.com" target="_blank">http://www.google.com</a>">Recherche 
    

  7. </SELECT> 
    

  8. </FORM>

Après modification selon la réponse proposé, j'ai tenté cela, mais en vain :

Dans la head : 
  1. <SCRIPT language="JavaScript"> 
    

  2.  
  3. function Lien(what) { 
    

  4. document.getElementById("show" ).src = what.value; 
    

  5. } 
    

  6.  
  7. function Lien() { 
    

  8. i = document.Choix.Liste.selectedIndex; 
    

  9. if (i == 0) return; 
    

  10. url = document.Choix.Liste.options[i].value; 
    

  11. parent.location.href = url; 
    

  12. } 
    

  13. </script>


Dans le body : 
  1. <select onchange="Lien(this)" name="Liste"> <option>Choisir une option </option> 
    

  2. <option value="../../copains.html">Les copains </option> 
    

  3. <option value="../../..plonge/index.html">La plongée</option> 
    

  4. <OPTION VALUE="<a href="http://www.google.com" target="_blank">http://www.google.com</a>">Recherche 
    

  5. /SELECT>
Lassé par la pub ? Créez un compte

Créer un nouveau sujet