链接的动态列表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>