dedecms 多级联动筛选

DedeCMS（织梦内容管理系统）是一款流行的PHP开源网站管理系统，它提供了丰富的功能来帮助用户快速搭建网站。多级联动筛选是一种常见的前端交互功能，它允许用户通过多个层级的选择来筛选数据，常见于电商网站的产品分类筛选、地区选择等场景。

基础概念

多级联动筛选通常涉及以下几个基础概念：

层级关系：数据之间存在层级关系，例如地区可以分为省、市、区等。
事件监听：通过JavaScript监听用户的选择事件，当用户选择一个选项时，触发相应的筛选逻辑。
动态加载：根据用户的选择动态加载下一层级的数据，而不是一次性加载所有数据。

类型

多级联动筛选可以分为以下几种类型：

静态数据：数据在页面加载时已经确定，通过JavaScript进行筛选和展示。
动态数据：数据通过AJAX请求从服务器动态获取，根据用户的选择实时更新。

应用场景

电商网站：产品分类筛选，如品牌、价格区间、地区等。
旅游网站：目的地选择，如国家、城市、景点等。
招聘网站：职位筛选，如职位类型、工作地点、薪资范围等。

示例代码

以下是一个简单的DedeCMS多级联动筛选的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>多级联动筛选示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
        <!-- 省份数据 -->
    </select>
    <select id="city" disabled>
        <option value="">请选择城市</option>
    </select>
    <select id="district" disabled>
        <option value="">请选择区县</option>
    </select>

    <script>
        $(document).ready(function() {
            // 初始化省份数据
            $('#province').append('<option value="1">广东省</option>');
            $('#province').append('<option value="2">湖南省</option>');

            // 监听省份选择事件
            $('#province').change(function() {
                var provinceId = $(this).val();
                if (provinceId) {
                    $('#city').prop('disabled', false);
                    // 根据省份ID加载城市数据
                    $.ajax({
                        url: 'get_cities.php', // 假设这是获取城市数据的API
                        data: { provinceId: provinceId },
                        success: function(data) {
                            $('#city').html('<option value="">请选择城市</option>');
                            $.each(data, function(index, city) {
                                $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#city').prop('disabled', true);
                    $('#district').prop('disabled', true).html('<option value="">请选择区县</option>');
                }
            });

            // 监听城市选择事件
            $('#city').change(function() {
                var cityId = $(this).val();
                if (cityId) {
                    $('#district').prop('disabled', false);
                    // 根据城市ID加载区县数据
                    $.ajax({
                        url: 'get_districts.php', // 假设这是获取区县数据的API
                        data: { cityId: cityId },
                        success: function(data) {
                            $('#district').html('<option value="">请选择区县</option>');
                            $.each(data, function(index, district) {
                                $('#district').append('<option value="' + district.id + '">' + district.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#district').prop('disabled', true).html('<option value="">请选择区县</option>');
                }
            });
        });
    </script>
</body>
</html>