Sujet Précédent Sujet Suivant

Afficher des images en fonction d'une sélection

Fermé
siamens_duj Messages postés 192 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 38264 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 octobre 2024 - 28 févr. 2018 à 22:30
Bonjour à tous,

Tout d'abord, je tiens à préciser que je débute en javascript.

J'ai créé un formulaire dans lequel j'ai plusieurs listes déroulantes.
J'aimerais mettre à côté de chaque liste déroulante deux image image "croix" et "check".
Au premier chargement de mon formulaire ces deux images doivent être cachées.
Quand je clic sur "Valider", si une liste déroulante a la valeur "Choix" alors l'image "croix" doit s'afficher.
A côté des autres, l'image "check" doit s'afficher.

J'ai essayé un petit truc. Seulement mes images s'affiche toujours au clic de valider car le nom de l'image n'est pas dynamique.

Voici mon code :
.js 

for ( const s of Selects ){
                                 
        if ( s.value == "Choix" ){
         //On met des croix à côté des valeurs erronées
        s.style="background-color:red";
       document.getElementById('imX').style.display="block";      
       document.getElementById('imX1').style.display="block";    
       document.getElementById('imX2').style.display="block"; 
          }
                                  
         if (s.value !== "Choix" ){
             document.getElementById('imC').style.display="block";
             document.getElementById('imC1').style.display="block";
             document.getElementById('imC2').style.display="block";
              result += parseInt( s.value, 10 );
              }
}


.html 

<table>
    <thead>
     <tr>
      <th align="left">XXX</th>
      <th>CHOIX</th>
     </tr>
    </thead>
    <tbody>
      <td>ORIGINE</td>
      <td>
       <SELECT 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" alt="" height="25" width="25" style.display="none"/>
       <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC" alt="" height="25" width="25" style.display="none"/>
       <script>
       //On récupère la valeur de l'élément sélectionné
         document.querySelector("select").addEventListener("change", function (){
         if(this.value=="Choix"){
         alert(this.value);
          document.getElementById('imX').style.display="block";
          document.getElementById('imC').style.display="none";
         }
         }, false);
       </script>
      </td>
     </tr>
     <tr>
      <td>CARACTERE</td>
      <td>
       <SELECT 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" alt="" height="25" width="25" style.display="none"/>
       <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC" alt="" height="25" width="25" style.display="none"/>
       <script>
       //On récupère la valeur de l'élément sélectionné
         document.querySelector("select").addEventListener("change", function (){
         if(this.value=="Choix"){
         alert(this.value);
          document.getElementById('imX').style.display="block";
          document.getElementById('imC').style.display="none";
         }
         }, false);
       </script>
      </td>
     </tr>
     <tr>
      <td>SITUATION</td>
      <td>
       <SELECT 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" alt="" height="25" width="25" style.display="none"/>
       <img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC" alt="" height="25" width="25" style.display="none"/>
       <script>
       //On récupère la valeur de l'élément sélectionné
         document.querySelector("select").addEventListener("change", function (){
         if(this.value=="Choix"){
          alert(this.value);
          document.getElementById('imX').style.display="block";
          document.getElementById('imC').style.display="none";
         }
         }, false);
       </script>
      </td>
     </tr>
     <tr>


.css

les images

display:none;

Merci pour votre aide.
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38264 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 octobre 2024 4 694
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: 
<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);
}

0
jordane45 Messages postés 38264 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 octobre 2024 4 694
28 févr. 2018 à 22:30
Je viens de voir que tu avais utilisé un addEventListener.. donc c'est ok.
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 : 
 <SELECTid="Choix2" name="Choix2" size="1" style="width:150px">


<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>
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
=Si la cellule A1 a du texte = B1 devient couleur
jsecours -
huhh -

8 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses