Problème liste déroulante HTML_JS

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 !