Bonjours, je suis nouveau dans le js, et je voulais faire un tableau à qui dans chaque case, se trouve une liste déroulante avec des images, par chances, j'ai trouvé sur un forum le programme qui me permettait d'avoir les images dans la liste déroulante, j'ai réussi a l'inséré dans un tableau html, mais la j'ai un petit problème, je prend l'exemple de seulement 2 case de tableau donc avec 2 liste déroulante, quand je clique sur ma liste déroulante dans ma première case puis sur une image au choix, elle s'y affiche (niquel), mais pour la deuxième case du tableau, elle renvoie son image vers la case 1. Par la logique des chose, je me suis dit, que mon script dans la case 2 avait le même Id que la case 1, donc oui c’était le cas, mais quand je met des id différent, sa refait la même chose mais inversement, c'est a dire que la case 2 fonctionne, mais pas la 1ere case, cette dernière envoie son image ver la case 2. Je comprend pas pourquoi. Pouvez vous m'aidez svp

Mon js:

 <script> function change() { select = document.getElementById("1"); select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage; } function change() { select = document.getElementById("2"); select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage; } </script>

mon tabeau :

<table> <tbody> <tr> <td> <select id="1" onchange="change();" width:10px; height:10px;"> <option style="background:url('Etape1.jpg') no-repeat; width:10px; height:10px;"></option><option style="background:url('Etape2.jpg') no-repeat; width:10px; height:10px;"></option> <option style="background:url('Etape3.jpg') no-repeat; width:10px; height:10px;"></option> <option style="background:url('Etape4.jpg') no-repeat; width:10px; height:10px;"></option> </select> </td> </tr> <tr> <td> <select id="2" onchange="change();" width:10px; height:10px;"> <option style="background:url('Etape1.jpg') no-repeat; width:10px; height:10px;"></option><option style="background:url('Etape2.jpg') no-repeat; width:10px; height:10px;"></option> <option style="background:url('Etape3.jpg') no-repeat; width:10px; height:10px;"></option> <option style="background:url('Etape4.jpg') no-repeat; width:10px; height:10px;"></option> </select> </td> </tr> </tbody> </table>

(j'ai posé exactement la même question sur un autre forum, sans réponse donc je vient de ce côté ci)
Merci de votre aide, à bientôt

Cordialement

Salut,

tu as utilisé la même fonction "change()" pour les 2 select, tu peux simplement mettre "this" en paramètre : change(this) dans le html , et faire :

<script>
  function change(elem) {//elem représente le "this", l'élément select
    var id = elem.id;
    console.log("select : "+id);
    if (id=="1"){
      //...
    } else if (id=="2"){
      //...
    }
}
</script>

Hey bonjour, merci pour ta reponse (j'etait en stage a ce moment là et je n'avais pas repondu, merci encore)