Javascript 链接动态列表

我有两个下拉菜单，一个显示所有地区，一个显示所有部门。当我选择一个地区时，我想在第二个列表中自动进行筛选，其中只显示该地区的部门。但是如果我不选择地区，我仍然想要所有部门的名单

这是我的密码：

我想我遗漏了几行链接这两个查询的内容。 谢谢你的帮助

控制台中没有错误消息…

替换

echo '<option value = " '.$row['nom_dept'].'" class= '.$row['nom_reg'].' ></option>';

与

您可以看到下面的工作代码，而且您的代码中有很多语法问题，您应该小心

 <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个列表出现，并且这两个列表之间仍然没有过滤器。。。控制台中有此错误消息未捕获SyntaxError:无效或意外令牌。

echo '<option value = " '.$row['nom_dept'].'" class= '.$row['nom_reg'].' ></option>';

echo '<option value = " '.$row['nom_dept'].'" class= "region-'.$row['nom_reg'].'" ></option>';

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>