Sujet Précédent Sujet Suivant

Problème liste déroulante HTML_JS

Résolu/Fermé
mistick - Modifié le 31 janv. 2022 à 11:35
 mistick - 31 janv. 2022 à 14:15
Bonjour,

J'ai un problème sur mes listes déroulante, enfin sur une seule liste.

J'ai créer 1 liste déroulante avec 4 possibilités et en fonction de la réponse de l'utilisateur 1 nouvelle liste s'affiche (différente) en fonction du choix de l'utilisateur.

En suite après avoir effectué ses 2 choix, il n'a plus qu'a appuyer sur un bouton pour afficher une nouvelle page web.

J'arrive à récupérer l'information sur la première liste mais pas sur la seconde.

Voici mon code: 
<!Doctype HTML>
<html lang="fr">
 <body>
  <head>
   <meta charset="UTF-8">
   <title>Test Liste</title>
   <link rel="shortcut icon" href="https://i.ibb.co/sJ38YxS/SNCF-logo-1.jpg" type="favicon/ico" />
   <script type="text/javascript" src="js/liste.js"></script>

   <script type="text/javascript">
    function Click_Button(){
     var poste = document.getElementById("select").value;
     var num = document.getElementById("select").value;

     url = 'file:///C:\Users\\MonUser\\Desktop\\test\\'+poste+'\\'+num+'.pdf'
     window.open(url, '_blank');
    }


    function choisir()
    {

     var liste = document.getElementById("select");
     var numero = liste.selectedIndex;
     var valeur = liste.options[numero].value;
     var div = document.getElementById("liste2");
     var select1 = '<select name="select2"> <option>11224</option><option>11855</option><option>15514</option><option>22944</option><option>31934</option><option>42273</option><option>43289</option><option>48361</option><option>52987</option><option>54543</option><option>61348</option><option>65206</option><option>66403</option><option>76044</option><option>83896</option><option>85862</option><option>88759</option>' 

     var select2 = '<select name="select3"> <option>11223</option><option>11558</option><option>19696</option><option>23335</option><option>45589</option><option>52740</option><option>63547</option><option>65074</option><option>68823</option><option>84694</option><option>89626</option><option>99476</option>'

     var select3 = '<select name="select4"> <option>11225</option><option>11557</option><option>17801</option><option>18937</option><option>23651</option><option>25925</option><option>33034</option><option>43525</option><option>48172</option><option>60600</option><option>80404</option><option>87751</option>'

     var select5 = '<select name="select6"> <option>11226</option><option>11559</option><option>25346</option><option>93735</option><option>94326</option><option>96204</option>'

       if(valeur == "Poste 1") // si ta valeur est alphabet, on insère le select1
       {
        div.innerHTML = select1
       }
       if(valeur == "Poste 2") // si ta valeur est chiffre, on insère le select2
       {
        div.innerHTML = select2
       }
       if(valeur == "Poste 3") // si ta valeur est alphabet, on insère le select3
       {
        div.innerHTML = select3
       }
       if(valeur == "Poste 5") // si ta valeur est alphabet, on insère le select5
       {
        div.innerHTML = select5
       }
    }
   </script>

   <style type="text/css">

    .styled {
     border: 0;
     line-height: 2.5;
     padding: 0 20px;
     font-size: 1rem;
     text-align: center;
     color: #fff;
     text-shadow: 1px 1px 1px #000;
     border-radius: 10px;
     background-color: rgba(220, 0, 0, 1);
     background-image: linear-gradient(to top left,
      rgba(0, 0, 0, .2),
      rgba(0, 0, 0, .2) 30%,
      rgba(0, 0, 0, 0));
     box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
     inset -2px -2px 3px rgba(0, 0, 0, .6);
    }

    .styled:hover {
     background-color: rgba(255, 0, 0, 1);
    }

    .styled:active {
     box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
     inset 2px 2px 3px rgba(0, 0, 0, .6);
    }</style>

  </head>

  <div><center>
   <p1>
    <!-- Tableau 2x2 -->
    <table width="30%" border="1" cellspacing="1" cellpadding="5">
     <tr>
      <td bgcolor="#CCCCCC">
       • Choisir le <strong>numéro</strong> du poste :
      </td>
      <td align="center" bgcolor="#F00">
       <select name="select" id="select" onChange="choisir()">
        <option></option>
        <option value="Poste 1">Poste 1</option>
        <option value="Poste 2">Poste 2</option>
        <option value="Poste 3">Poste 3</option>
        <option value="Poste 5">Poste 5</option>
       </select>
      </td>
     </tr>

      <td bgcolor="#CCCCCC">
       • Choisir le <strong>5</strong> numéro
      </td>
      <td align="center" bgcolor="#F00">
       <div id="liste2">
        <select id="test" ></select>
       </div>
      </td>

     </tr>
    </table>

   </p1>
   <br><br>

   <p2>
    <!-- Bouton cliquable pour afficher -->    
    <button class="favorite styled" onclick="Click_Button()">AFFICHER</button>
    
   </p2>
  </div> 
 </body>
</html>


EDIT : Correction des balises de code ( ajout du LANGAGE )

Merci pour votre aide !

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38162 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 mai 2024 4 658
31 janv. 2022 à 14:10 
<!Doctype HTML>
<html lang="fr">
 <body>
  <head>
   <meta charset="UTF-8">
   <title>Test Liste</title>
   <link rel="shortcut icon" href="https://i.ibb.co/sJ38YxS/SNCF-logo-1.jpg" type="favicon/ico" />
   
   <style type="text/css">

    .styled {
     border: 0;
     line-height: 2.5;
     padding: 0 20px;
     font-size: 1rem;
     text-align: center;
     color: #fff;
     text-shadow: 1px 1px 1px #000;
     border-radius: 10px;
     background-color: rgba(220, 0, 0, 1);
     background-image: linear-gradient(to top left,
      rgba(0, 0, 0, .2),
      rgba(0, 0, 0, .2) 30%,
      rgba(0, 0, 0, 0));
     box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
     inset -2px -2px 3px rgba(0, 0, 0, .6);
    }

    .styled:hover {
     background-color: rgba(255, 0, 0, 1);
    }

    .styled:active {
     box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
     inset 2px 2px 3px rgba(0, 0, 0, .6);
    }</style>

  </head>

  <div><center>
   <p1>
    <!-- Tableau 2x2 -->
    <table width="30%" border="1" cellspacing="1" cellpadding="5">
     <tr>
      <td bgcolor="#CCCCCC">
       • Choisir le <strong>numéro</strong> du poste :
      </td>
      <td align="center" bgcolor="#F00">
       <select name="select" id="select" onChange="choisir()">
        <option></option>
        <option value="Poste 1">Poste 1</option>
        <option value="Poste 2">Poste 2</option>
        <option value="Poste 3">Poste 3</option>
        <option value="Poste 5">Poste 5</option>
       </select>
      </td>
     </tr>

      <td bgcolor="#CCCCCC">
       • Choisir le <strong>5</strong> numéro
      </td>
      <td align="center" bgcolor="#F00">
       <div id="div_liste2">
        <select id="liste2" ></select>
       </div>
      </td>

     </tr>
    </table>

   </p1>
   <br><br>

   <p2>
    <!-- Bouton cliquable pour afficher -->    
    <button class="favorite styled" onclick="Click_Button()">AFFICHER</button>
    
   </p2>
  </div> 


  <!-- Prends l'habitude de placer tes codes JS juste avant le </body> -->
  <script type="text/javascript" src="js/liste.js"></script>
  <script type="text/javascript">
    function Click_Button(){
     var poste = document.getElementById("select").value;
     var num = document.getElementById("liste2").value;

     url = 'file:///C:\Users\\MonUser\\Desktop\\test\\'+poste+'\\'+num+'.pdf'
     window.open(url, '_blank');
    }


    function choisir()
    {

     var liste = document.getElementById("select");
     var numero = liste.selectedIndex;
     var valeur = liste.options[numero].value;
     var liste2 = document.getElementById("liste2");
     var select1 = '<option>11224</option><option>11855</option><option>15514</option><option>22944</option><option>31934</option><option>42273</option><option>43289</option><option>48361</option><option>52987</option><option>54543</option><option>61348</option><option>65206</option><option>66403</option><option>76044</option><option>83896</option><option>85862</option><option>88759</option>' 

     var select2 = '<option>11223</option><option>11558</option><option>19696</option><option>23335</option><option>45589</option><option>52740</option><option>63547</option><option>65074</option><option>68823</option><option>84694</option><option>89626</option><option>99476</option>'

     var select3 = '<option>11225</option><option>11557</option><option>17801</option><option>18937</option><option>23651</option><option>25925</option><option>33034</option><option>43525</option><option>48172</option><option>60600</option><option>80404</option><option>87751</option>'

     var select5 = '<option>11226</option><option>11559</option><option>25346</option><option>93735</option><option>94326</option><option>96204</option>'
    
      switch(valeur){
        case "Poste 1":
          liste2.innerHTML = select1;
          break;
        case "Poste 2":
          liste2.innerHTML = select2;
          break;
         case "Poste 3":
          liste2.innerHTML = select3;
          break;
        case "Poste 5":
          liste2.innerHTML = select5;
          break;
      }
    }
   </script>
  
 </body>
</html>

1
Réponse 2 / 4
jordane45 Messages postés 38162 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 mai 2024 4 658
31 janv. 2022 à 11:37
Bonjour,

L' ID de ta seconde liste c'est test et non pas liste2 
  <select id="test" ></select>
0
Réponse 3 / 4
mistick
Modifié le 31 janv. 2022 à 12:53
si je mets test à la place de liste2 ma 2ème liste ne s'affiche plus ! 
<td align="center" bgcolor="#F00">
  <div id="test">
  <select id="test" ></select>
  </div>
</td>
0
jordane45 Messages postés 38162 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 mai 2024 4 658
31 janv. 2022 à 12:54
Je n'ai pas parlé de la DIV mais de ton select
0
mistick > jordane45 Messages postés 38162 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 mai 2024
Modifié le 31 janv. 2022 à 12:57 
 
</td>
      <td align="center" bgcolor="#F00">
         <div id="liste2">
            <select id="liste2" ></select>
       </div>
</td>


même résultat sauf que là j'ai mes 2 listes déroulante qui s'affiche mais voilà ce qui sort:
file:///C:/Users/X/Desktop/X/Poste%201/Poste%201.pdf
0
mistick > mistick
31 janv. 2022 à 12:59
En gros dans ma fonction JS Click_Button(), je récupère 'poste' mais pas 'num'
0
Réponse 4 / 4
mistick
31 janv. 2022 à 14:15
Merci beaucoup !
Je prends notes des commentaires mis dans le code
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Accéder à la liste de numéros de téléphone en 07
cbhr -
syma 59 -

41 réponses
Annuaire inversé liste rouge
caro2lille -
gwendolyne72 -

13 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer le contenue d'une cellule avec liste déroulante
lebutters -
lebutters -

7 réponses