[英]Linked dynamic list PHP JS
I have two drop down menus, one with all regions and one with all departments. 我有两个下拉菜单,一个包含所有区域的菜单,一个包含所有部门的菜单。 I would like to have the choice when I choose a region I have a filter that is done automatically on the second list where only the department of this region appears.
当我选择一个区域时,我想选择一个选项,该过滤器会在第二个列表中自动完成,其中仅显示该区域的部门。 But if I do not choose regions I still want to have the list of all the departments.
但是,如果我不选择区域,我仍然希望拥有所有部门的清单。
Here is my code: 这是我的代码:
<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>
and my code in JS (which is called at the top of the first page) : 和我在JS中的代码(在第一页的顶部调用):
$(#region).change(function(e)
{
var region = this.value;
$("#departement option").forEach(function($option)
{
if ($option.hasClass(region))
{
$option.show();
} else {
$option.hide();
}
});
});
I think I miss a few lines to link the two queries. 我想我错过了几行链接这两个查询。 Thank you for your help
谢谢您的帮助
and I have no error messages in the console ... 而且我在控制台中没有错误消息...
Replace 更换
echo '<option value = " '.$row['nom_dept'].'" class= '.$row['nom_reg'].' ></option>';
with 同
echo '<option value = " '.$row['nom_dept'].'" class= "region-'.$row['nom_reg'].'" ></option>';
and in js replace 并在js中替换
var region = this.value;
with 同
var region = 'region-'+this.value;
You can see below working code, also you have a lot of syntax problem in your code you should be careful about that 您可以在下面的工作代码中看到,而且您的代码中还有很多语法问题,您应该注意
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.