[Résolu] Images dans des liste déroulantes html js

Kizars a écrit :
Honnêtement oui c'est de la recopie, un code que j'ai trouvé. donc je sais pas pourquoi il y a du css la mais a la base le code fonctionne bien pour son utilité d'origine (mettre une image en cliquant sur la liste déroulante)

Ok je comprends. Alors pour info si tu veux mettre du style dans une balise html ca s'écrit plutôt :

<select id="1" onchange="change();"  style="width:10px; height:10px;">

exactement comme c'est fait plus bas pour les options.

Et pour aller un peu plus loin on n'écrit pas le CSS comme ça normalement. On préfère donner une classe à l'objet html et a écrire le CSS dans un fichier spécial ou il n'y a que le CSS :

<select id="1" onchange="change();"  class="monselect">

.monselect {
    width:10px;
    height:10px;
}

Mais bon c'est pas le sujet c'est si tu veux aller un peu plus loin dans les bonnes façon de faire.

Kizars a écrit :
Ensuite tu me dit de te dire quelle fonction va être exécuté pour quel select, et bas la je pourrai pas te dire car je sais pas non plus.. .
Mais je pense que a la place de ton "blablabla" tu met l'id "1" pour que sa fonction soit associer au select dons l'id est & et idem pour le "2" avec la fonction qui a "blobloblo". Et si c'est pas le cas bas.. je pourrai rien te dire de plus sur cette fonction désolé.

Et bien justement non. Comment ton code peut choisir une des deux fonctions sans regarder dedans ? Et oui, il ne va pas exécuter les fonctions pour savoir...

Il faut donc différencier les fonctions pour chaque appel AVANT l'intérieur de la fonction. Une première solution serait de faire ça :

<select id="1" onchange="change1();"></select>
<select id="2" onchange="change2();"></select>

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

Ici tu vois bien que chaque select appelle sa propre fonction, il n'y a pas de collisions.

C'est un premiere solution pour comprendre le concept. Maintenant, on va tenter de mutualiser un peu tout ca parcequ'on a 2 fonction identiques (seul l'id change). On va pour ca avoir UNE seule fonction (pas deux fonction avec le même nom) et lui donner l'ID en paramètre :

<select id="1" onchange="change('1');"></select>
<select id="2" onchange="change('2');"></select>

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

Et voila, on a une seule fonction pour changer le background (plus facile à maintenir) et c'est l'argument qui va influer sur le l'élément a changer.

Pour aller un peu plus loin ici encore on évite également de mettre le Js diretement dans le html et on aura plutôt tendance a utiliser un event listner :

<select id="1">
  <option value="toto">test</option>
  <option value="toto">test</option>
</select>
<select id="2">
  <option value="toto">test</option>
  <option value="toto">test</option>
</select>

 <script>
document.getElementById("1").addEventListener("change", function (){ change('1'); }); 
document.getElementById("2").addEventListener("change", function (){ change('2'); });

function change(id) {
    select = document.getElementById(id);
    select.style.color = "red";
}
</script>

De cette facon c'est chacun chez soit et le code sera bein gardé le HTML n'a que du HTML et le Js et le CSS sont à part bien rangés !

Kizars a écrit :
J'ai pas encore eu de cours sur le javascript en classe, le brin de connaissance que j'ai sont en désordre complet...

Y'a pas de soucis on est tous la pour apprendre

Si tu veux des précisions ou que ce n'est pas encore clair n'hésites pas.


Bonne aprem !
Modifié par _laurent (06 May 2021 - 14:59)