JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="region">Choisissez une région :</label>
  <select id="region" name="region">
    <option value="0">-- choisissez --</option>
    <option value="paysloire">Pays de Loire</option>
    <option value="breizh">Bretagne</option>
    <option value="poitou">Poitou Charentes</option>
  </select>
  <label for="dpt">Puis un département :</label>
  <select id="dpt">
  <option>--- choisissez---</option>
  </select>
  <input type="submit"/>
</form>

JavaScript

function affichage_liste2 (id_lire,id_ecrire) { 
	var liste2="";
	
	document.getElementById ("id_ecrire").innerHTML="";
	
	var choix_departement=document.getElementById("id_lire").value; 
	
	switch (choix_departement) { 
		case '0' : return; break;
		case 'paysloire' : var tab = ["Maine-et-Loire","Loire-atlantique","Sarthe","Mayenne","Vendée"]; break;
		case 'breizh' : var tab =  ["Finistère","Côtes d'Armor","Ile-et-Vilaine","Morbihan"]; break;
		case 'poitou' : var tab =  ["Charente","Charente-maritime","Deux-Sèvres","Vienne"]; break;
	}

		//generation de la deuxieme liste
	liste2 += '<select name="dpt">';
	for (j=0;j<tab.length;j++) { 
		liste2 += '<option value="'+tab[j]+'">'+tab[j]+'</option>';
	}
	liste2 += '</select>';
	//ecriture de la deuxieme liste dans le div la page
	document.getElementById("id_ecrire").innerHTML=liste2;
}
window.addEventListener("load",function(){
            affichage_liste2(); 
            document.getElementById("region").addEventListener("change",affichage_liste2);
			
        });