链接的动态列表PHP的JS
问题描述:
我有两个下拉菜单,其中一个与所有地区和一个与所有部门。当我选择一个区域时,我想要有选择,我有一个过滤器自动在第二个列表中只显示该区域的部门。但是,如果我不选择地区,我仍然想拥有所有部门的名单。链接的动态列表PHP的JS
这里是我的代码:
<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();
}
});
});
我想我错过了几行来链接两个查询。 感谢您的帮助
,我必须在控制台中没有错误消息......
答
更换
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>
谢谢你,我做了在代码中的变化,但我仍然有我的2个列表出现,并且两者之间仍然没有过滤器...我在控制台“Uncaught SyntaxError:Invalid or unexpected token”中显示此错误消息。 – Persephone