Linked dynamic list PHP JS

Question

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 ...

Answer 1

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>