鏈接的動態列表PHP的JS

Question

我有兩個下拉菜單，其中一個與所有地區和一個與所有部門。當我選擇一個區域時，我想要有選擇，我有一個過濾器自動在第二個列表中只顯示該區域的部門。但是，如果我不選擇地區，我仍然想擁有所有部門的名單。

這裏是我的代碼：

<div class="dropdown"> 
    <ul> 
     <li> 
     <label for="region"> Régions </label> 
     <input list="region" type="text" id="choixRegion" placeholder=" -- Toutes -- "> 
     <datalist id="region" > 
     <form method="post"> 
        <select name="region" id="region"> 
        <?php 
        try{ 
         //Tentative de connexion à la bdd 
         $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres',''); 
        } 
        catch(Exception $e){ 
         // En cas d'erreur on affiche un message et on stop tout 
         die('Erreur : '.$e->getMessage()); 
        } 
        $requete ='SELECT "region" as "id_reg" ,"nccenr"as "nom_reg" from "WEB"."REGION_2017" order by "nom_reg" ASC'; 

        $listRegion = $bdd -> query($requete); 

        foreach($listRegion as $row){ 
         echo "<option value = ".$row['nom_reg']."></option>"; 
        } 

        ?> 
        </select> 
        </datalist> 
       </li> 

      <li> 


     <label for="departement"> Départements </label> 
     <input list="departement" type="text" id="choixDept" placeholder=" -- Tous -- "> 
     <datalist id="departement" > 
     <form method="post"> 
        <select name="departement" id="departement" class="nom_reg"> 
        <?php 
        try{ 
         //Tentative de connexion à la bdd 
         $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres',''); 
        } 
        catch(Exception $e){ 
         // En cas d'erreur on affiche un message et on stop tout 
         die('Erreur : '.$e->getMessage()); 
        } 
        $requete ='SELECT "region" as "id_reg", "dep" as "id_dep" , "nccenr" as "nom_dept" from "WEB"."DEPARTEMENT_2017" order by "nom_dept" ASC'; 

        $listDepartement = $bdd -> query($requete); 

        foreach($listDepartement as $row){ 
         echo '<option value = " '.$row['nom_dept'].'" class= '.$row['nom_reg'].' ></option>'; 
        } 

        ?> 
        </select> 
        </datalist> 
       </li> 




    </div> 


</body> 

和我的JS代碼（這就是所謂的f的頂部第一頁）：

$(#region).change(function(e) 
{ 
var region = this.value; 
$("#departement option").forEach(function($option) 
{ 
    if ($option.hasClass(region)) 
    { 
     $option.show(); 
    } else { 
    $option.hide(); 
    } 
}); 
}); 

我想我錯過了幾行來鏈接兩個查詢。 感謝您的幫助

，我必須在控制檯中沒有錯誤消息......

Answer 1

更換

echo '<option value = " '.$row['nom_dept'].'" class= '.$row['nom_reg'].' ></option>'; 

與

echo '<option value = " '.$row['nom_dept'].'" class= "region-'.$row['nom_reg'].'" ></option>'; 

和JS更換

var region = this.value; 

與

var region = 'region-'+this.value; 

你可以看到下面的工作代碼，你也有很多你的代碼的語法問題，你應該小心的是

<div class="dropdown"> 
    <ul> 
     <li> 
      <label for="region"> Régions </label> 

        <select name="region" id="region"> 
         <option value = "1">region1</option> 
         <option value = "2">region2</option> 
        </select> 

     </li> 

     <li> 


      <label for="departement"> Départements </label> 
        <select name="departement" id="departement" class="nom_reg"> 
         <option value = "0">No Value</option> 
         <option value = "1" class= "region-1" >region1 -dep1</option> 
         <option value = "2" class= "region-1" >region1 -dep2</option> 
         <option value = "3" class= "region-1" >region1 -dep3</option> 
         <option value = "4" class= "region-2" >region2 -dep5</option> 
         <option value = "5" class= "region-2" >region2 -dep6</option> 
        </select> 

     </li> 

    </ul> 


</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#region').change(function(e) 
     { 
      var region = 'region-'+this.value; 
      $("#departement option").each(function(i,e) 
      { 
       var $option = $(e) 
       console.log($option); 

       if ($option.hasClass(region)) 
       { 
        $option.show(); 
       } else { 
        $option.hide(); 
       } 
      }); 
     }); 
    }); 
</script>