drmy1050
2017-10-04 12:38
浏览 46

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doulu1867 2017-10-04 12:55
    已采纳

    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

    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>
    
    点赞 评论

相关推荐 更多相似问题