织梦三级联动添加步骤是什么？-织梦建站-盈思创科技

下面我将为您提供一个完整、详细的教程，以最经典的“省-市-区”三级联动为例,手把手教您如何在织梦中实现。

（图片来源网络，侵删）

实现思路

数据准备：创建三个数据表，分别用于存储省、市、区的数据。
后台管理：创建一个简单的后台管理界面,方便我们向这三个数据表中添加和管理数据。
模板制作：在前台页面，使用三个下拉框来展示省、市、区。
JS联动：编写JavaScript代码，监听省和市的选择变化,动态加载对应的城市和区县数据。
数据提交：将用户选择的值通过织梦的自定义表单提交到后台。

第一步：创建数据表

我们需要在织梦的数据库中创建三个表，分别用来存储省、市、区信息,您可以使用phpMyAdmin等数据库管理工具来执行以下SQL语句。

省份数据表 (#@__province)

CREATE TABLE `#@__province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

城市数据表 (#@__city)

CREATE TABLE `#@__city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `provinceid` int(11) NOT NULL COMMENT '所属省份ID',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

注意：provinceid 字段用于关联到省份表。

（图片来源网络，侵删）

区县数据表 (#@__area)

CREATE TABLE `#@__area` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `cityid` int(11) NOT NULL COMMENT '所属城市ID',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

注意：cityid 字段用于关联到城市表。

第二步：准备数据并向表中插入

这是最繁琐但也是最关键的一步，您可以从网上下载完整的省市区数据（通常是CSV或SQL文件）,然后导入到我们刚刚创建的三个表中。

在 #@__province 表中插入：id=1, name='广东省'
在 #@__city 表中插入：id=1, name='广州市', provinceid=1
在 #@__area 表中插入：id=1, name='天河区', cityid=1

为了方便演示，我们先手动插入几条测试数据：

-- 插入省份
INSERT INTO `#@__province` (`id`, `name`) VALUES
(1, '广东省'),
(2, '北京市');
-- 插入城市
INSERT INTO `#@__city` (`id`, `name`, `provinceid`) VALUES
(1, '广州市', 1),
(2, '深圳市', 1),
(3, '东城区', 2),
(4, '西城区', 2);
-- 插入区县
INSERT INTO `#@__area` (`id`, `name`, `cityid`) VALUES
(1, '天河区', 1),
(2, '越秀区', 1),
(3, '南山区', 2),
(4, '福田区', 2),
(5, '朝阳区', 3),
(6, '海淀区', 4);

第三步：创建自定义表单

在织梦后台,我们需要创建一个自定义表单来接收用户提交的地址信息。

登录织梦后台。
进入【核心】 -> 【内容模型管理】 -> 【自定义表单】。
点击【增加新字段】。
创建三个字段：
- 省份：
  - 字段名：province (必须用英文)
  - 字段类型：下拉菜单
  - 前台提示文字：省份
  - 默认值：留空
  - 选项：留空，我们会用JS动态填充
- 城市：
  - 字段名：city
  - 字段类型：下拉菜单
  - 前台提示文字：城市
  - 默认值：请选择城市
- 区县：
  - 字段名：area
  - 字段类型：下拉菜单
  - 前台提示文字：区县
  - 默认值：请选择区县
填写完所有字段后，点击【保存】。

第四步：制作前台模板和JS

我们将创建一个HTML页面,包含三个下拉框和联动所需的JavaScript代码。

创建模板文件 在您的织梦模板目录（如 /templets/default/）下创建一个新文件，area_select.htm。

编写模板内容 将以下代码复制到 area_select.htm 文件中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">织梦三级联动示例</title>
    <script src="{dede:global.cfg_cmspath/}/static/js/jquery.min.js"></script> <!-- 确保引入了jQuery -->
    <script type="text/javascript">
        $(function(){
            // 初始化时，加载所有省份
            loadProvince();
            // 当省份选择框发生变化时
            $('#province').change(function(){
                var provinceid = $(this).val();
                if(provinceid != ''){
                    loadCity(provinceid); // 加载对应的城市
                    $('#area').html('<option value="">请选择区县</option>'); // 清空区县选择框
                } else {
                    $('#city').html('<option value="">请选择城市</option>');
                    $('#area').html('<option value="">请选择区县</option>');
                }
            });
            // 当城市选择框发生变化时
            $('#city').change(function(){
                var cityid = $(this).val();
                if(cityid != ''){
                    loadArea(cityid); // 加载对应的区县
                } else {
                    $('#area').html('<option value="">请选择区县</option>');
                }
            });
            // 加载省份的函数
            function loadProvince(){
                $.ajax({
                    url: '/plus/ajax_area.php', // 我们下一步要创建的这个文件
                    type: 'GET',
                    data: {type: 'province'},
                    dataType: 'json',
                    success: function(data){
                        var options = '<option value="">请选择省份</option>';
                        for(var i = 0; i < data.length; i++){
                            options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        }
                        $('#province').html(options);
                    }
                });
            }
            // 加载城市的函数
            function loadCity(provinceid){
                $.ajax({
                    url: '/plus/ajax_area.php',
                    type: 'GET',
                    data: {type: 'city', provinceid: provinceid},
                    dataType: 'json',
                    success: function(data){
                        var options = '<option value="">请选择城市</option>';
                        for(var i = 0; i < data.length; i++){
                            options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        }
                        $('#city').html(options);
                    }
                });
            }
            // 加载区县的函数
            function loadArea(cityid){
                $.ajax({
                    url: '/plus/ajax_area.php',
                    type: 'GET',
                    data: {type: 'area', cityid: cityid},
                    dataType: 'json',
                    success: function(data){
                        var options = '<option value="">请选择区县</option>';
                        for(var i = 0; i < data.length; i++){
                            options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        }
                        $('#area').html(options);
                    }
                });
            }
        });
    </script>
</head>
<body>
    <h1>请选择您的地址</h1>
    <!-- 
      注意：这里使用织梦的自定义表单标签
      dede:form 的 action 属性指向你的自定义表单提交处理页面
      table 标签的 name 属性必须和你创建的自定义表单名一致
    -->
    {dede:form name='your_form_name' method='post' action='/plus/diy.php'}>
        <table>
            <tr>
                <td><strong>省份：</strong></td>
                <td>
                    <select name="province" id="province">
                        <option value="">请选择省份</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><strong>城市：</strong></td>
                <td>
                    <select name="city" id="city">
                        <option value="">请选择城市</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><strong>区县：</strong></td>
                <td>
                    <select name="area" id="area">
                        <option value="">请选择区县</option>
                    </select>
                </td>
            </tr>
            <!-- 其他表单字段 -->
            <tr>
                <td><strong>姓名：</strong></td>
                <td><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td><strong>联系电话：</strong></td>
                <td><input type="text" name="tel" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交" /></td>
            </tr>
        </table>
    {/dede:form}
</body>
</html>

第五步：创建AJAX数据处理文件

这是实现联动的核心，我们需要创建一个PHP文件来响应前端的AJAX请求,并从数据库中查询数据。

在织梦的 /plus/ 目录下创建一个新文件，命名为 ajax_area.php。
将以下代码复制到 ajax_area.php 文件中。

<?php
/**
 * 织梦三级联动AJAX处理文件
 * 作者：织梦侠
 * 日期：2025-10-27
 */
require_once(dirname(__FILE__)."/../include/common.inc.php");
// 获取请求参数
$type = isset($_GET['type']) ? trim($_GET['type']) : '';
$provinceid = isset($_GET['provinceid']) ? intval($_GET['provinceid']) : 0;
$cityid = isset($_GET['cityid']) ? intval($_GET['cityid']) : 0;
// 定义返回的JSON数据
$data = array();
// 根据类型查询数据库
switch ($type) {
    case 'province':
        // 查询所有省份
        $dsql->SetQuery("SELECT id, name FROM `#@__province` ORDER BY id ASC");
        $dsql->Execute('pro');
        while ($row = $dsql->GetArray('pro')) {
            $data[] = $row;
        }
        break;
    case 'city':
        // 查询指定省份下的所有城市
        if ($provinceid > 0) {
            $dsql->SetQuery("SELECT id, name FROM `#@__city` WHERE provinceid = {$provinceid} ORDER BY id ASC");
            $dsql->Execute('city');
            while ($row = $dsql->GetArray('city')) {
                $data[] = $row;
            }
        }
        break;
    case 'area':
        // 查询指定城市下的所有区县
        if ($cityid > 0) {
            $dsql->SetQuery("SELECT id, name FROM `#@__area` WHERE cityid = {$cityid} ORDER BY id ASC");
            $dsql->Execute('area');
            while ($row = $dsql->GetArray('area')) {
                $data[] = $row;
            }
        }
        break;
}
// 设置响应头为JSON格式并输出数据
header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);
exit();
?>

第六步：测试和提交

测试联动：在浏览器中访问 area_select.htm 页面,你应该能看到：
- 打开页面时,省份下拉框会自动加载所有省份。
- 选择一个省份后,城市下拉框会自动加载该省份下的所有城市。
- 选择一个城市后,区县下拉框会自动加载该城市下的所有区县。
- 如果清空了省份或城市,下级选项也会被清空。
测试提交：填写完所有信息后点击“提交”按钮，数据会提交到你之前创建的自定义表单中，你可以在后台【自定义表单管理】中查看用户提交的数据。

总结与注意事项

安全性：ajax_area.php 文件直接操作数据库，虽然使用了 intval() 进行了基本过滤，但在生产环境中，建议对输入参数进行更严格的校验,以防止SQL注入。
性能：如果数据量非常大（例如全国所有省市区），可以考虑一次性将所有数据加载到前端，然后用JS进行筛选，这样可以减少对服务器的请求次数,提升用户体验。
灵活性：这个教程是一个通用模板，你可以根据需要修改数据表结构、字段名和AJAX请求的逻辑，以适应其他类型的三级联动，如“公司-部门-小组”、“产品-分类-子分类”等。

希望这个详细的教程能帮助您成功在织梦中实现三级联动功能！

织梦三级联动添加步骤是什么？