Afficher des images en fonction d'une sélection
Fermé
siamens_duj
Messages postés
191
Date d'inscription
vendredi 20 juin 2014
Statut
Membre
Dernière intervention
14 février 2019
-
Modifié le 27 févr. 2018 à 17:58
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 28 févr. 2018 à 22:30
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 28 févr. 2018 à 22:30
A voir également:
- Afficher une image en javascript
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Ce programme est écrit en python. il construit un mot secret dans une variable mais il ne l'affiche pas. modifiez-le pour qu'il affiche le mot secret. exécutez-le. quel est ce mot secret ? ✓ - Forum Python
- Recherche par image - Guide
- Image iso - Guide
- Telecharger javascript - Télécharger - Langages
1 réponse
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
28 févr. 2018 à 22:07
28 févr. 2018 à 22:07
Bonjour,
Si tu veux "activer" le code lorsque tu choisis une valeur dans ta liste déroulante... tu dois utiliser l'event ONCHANGE
par exemple:
et le code js
Si tu veux "activer" le code lorsque tu choisis une valeur dans ta liste déroulante... tu dois utiliser l'event ONCHANGE
par exemple:
<SELECT name="Choix" id="ch" size="1" style="width:150px" onchange="tafonction(this.value)">
et le code js
function tafonction(valeur){
alert("valeur choisie : " + valeur);
}
28 févr. 2018 à 22:30
Par contre... CHAQUE ID doit être UNIQUE
là.. tu as utilisé les mêmes ID pour toutes tes images ... id="imX" et id="imC"
De plus ton code JS est répété plusieurs fois... sauf qu'il est codé pour le faire sur TOUS les SELECT de ta page
document.querySelector("select").addEventListener("change", function (){Donc.. soit tu attaches l'évènement séparément sur chaque select (en faisant comme dans mon exemple précédent ou en changeant ton code par, par exemple :
document.getElementById("id_du_select").addEventListener("change", function (){NB: Tu auras, au préalable, ajouté des ID pour chacun de tes select...
Une dernière possibilité.. serait de conserver ton code JS (en ne le mettant qu'une seule fois par contre...) et que dedans tu saches quel "select" a été activé.
(Là encore pense à mettre des ID à tes select )
Et en fonction du select en question.. jouer sur les images qui le concerne.
Je te conseille de mettre en relation les ID de tes select et ceux de tes images..
par exemple :
<img src="D:\Users\MonUser\Documents\JAVASCRIPT\croix.png" id="imX_Choix2" alt="" height="25" width="25" style.display="none"/> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC_Choix2" alt="" height="25" width="25" style.display="none"/>Ce qui donnerait un truc du genre
<html> <head> <title>...</title> </head> <body> <table> <thead> <tr> <th align="left">XXX</th> <th>CHOIX</th> </tr> </thead> <tbody> <td>ORIGINE</td> <td> <SELECT id="Choix" name="Choix" id="ch" size="1" style="width:150px"> <OPTION>Choix</OPTION> <OPTION value="0">Anglais</OPTION> <OPTION value="1">Français</OPTION> <OPTION value="6">Belge</OPTION> <OPTION value="9">Espagnol</OPTION> </SELECT> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\croix.png" id="imX_Choix" alt="" height="25" width="25" style ="display:none"/> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC_Choix" alt="" height="25" width="25" style ="display:none"/> </script> </td> </tr> <tr> <td>CARACTERE</td> <td> <SELECT id="Choix1" name="Choix1" size="1" style="width:150px"> <OPTION>Choix</OPTION> <OPTION value="0">Existe</OPTION> <OPTION value="2">N'existe pas</OPTION> </SELECT> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\croix.png" id="imX_Choix1" alt="" height="25" width="25" style ="display:none"/> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC_Choix1" alt="" height="25" width="25" style ="display:none"/> </td> </tr> <tr> <td>SITUATION</td> <td> <SELECT id="Choix2" name="Choix2" size="1" style="width:150px"> <OPTION>Choix</OPTION> <OPTION value="0">Aucune</OPTION> <OPTION value="1">Sans emploi</OPTION> <OPTION value="3">Etudiant</OPTION> <OPTION value="6">Salarié</OPTION> </SELECT> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\croix.png" id="imX_Choix2" alt="" height="25" width="25" style ="display:none"/> <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC_Choix2" alt="" height="25" width="25" style ="display:none"/> </td> </tr> <tr> </table> <script type="text/javascript"> var selects = document.getElementsByTagName('select'); for (i = 0; i < selects.length; ++i) { selects[i].addEventListener("change", function (e){ var selectID = this.id; console.log ( "selectID : " +selectID); if(this.value=="Choix"){ alert(this.value); document.getElementById('imX_'+selectID).style.display="block"; document.getElementById('imC_'+selectID).style ="display:none"; }else{ document.getElementById('imX_'+selectID).style ="display:none"; document.getElementById('imC_'+selectID).style.display="block"; } }); } </script> </body> </html>