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中的代码（在第一页的顶部调用）：

$(#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>

链接动态列表PHP JS

1 个答案: