如何实现织梦5.7自定义表单的多级城市联动功能？

实现多级城市联动的方法是在织梦5.7中使用自定义表单模块，通过AJAX异步请求获取下级城市数据。

在织梦CMS 5.7中，实现多级城市联动功能是一项复杂但非常有用的任务，特别是在需要用户选择具体地理位置时，本文将详细介绍如何通过自定义表单来实现多级城市（省、市、区）联动的方法。

准备工作

环境要求

PHP：确保服务器上安装了 PHP 5.3 或更高版本。

MySQL：数据库版本应为 MySQL 5.0 或更高版本。

织梦CMS 5.7：确保已安装并配置好织梦CMS。

文件及目录结构

1、/data/：数据存储目录，用于存放城市数据文件。

2、/templets/：模板目录，用于存放自定义表单的模板文件。

步骤一：准备城市数据

获取城市数据

可以从网上找到免费的城市数据包，通常包含省、市、区的数据，下载后解压到/data/city_data/ 目录下。

创建数据表

在 MySQL 数据库中创建一个新表来存储这些城市数据，创建一个名为dedecms_city 的表，包含以下字段：

id：主键，自增。

province：省名称。

city：市名称。

district：区名称。

pid：父级 ID（用于表示省、市、区的层级关系）。

CREATE TABLEdedecms_city (id INT(11) NOT NULL AUTO_INCREMENT,province VARCHAR(100) NOT NULL,city VARCHAR(100) NOT NULL,district VARCHAR(100) NOT NULL,pid INT(11) NOT NULL,
    PRIMARY KEY (id),
    INDEXpid (pid)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

导入数据

将准备好的城市数据批量导入到dedecms_city 表中，可以使用 SQL 脚本或者直接使用数据库管理工具进行导入。

步骤二：编写联动JS代码

为了实现前端的多级联动效果，我们需要编写 JavaScript 代码，可以在/templets/default/ 目录下新建一个js/ 目录，并在其中创建city_cascade.js 文件。

$(document).ready(function() {
    function getOptions(parentId) {
        $.post('get_options.php', { parentId: parentId }, function(response) {
            if (response) {
                var options = '';
                for (var i = 0; i < response.length; i++) {
                    options += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
                }
                if (parentId == 0) {
                    $('#city_province').html(options);
                } else if (parentId == 1) {
                    $('#city_city').html(options);
                } else if (parentId == 2) {
                    $('#city_district').html(options);
                }
            }
        }, 'json');
    }
    $('#city_province').change(function() {
        getOptions($(this).val());
    });
    $('#city_city').change(function() {
        getOptions($(this).val());
    });
    getOptions(0); // 初始化省份列表
});

步骤三：编写后台处理脚本

在/data/ 目录下创建一个get_options.php 文件，用于处理 AJAX 请求并返回相应的 JSON 数据。

<?php
include_once '../config.inc.php'; // 引入织梦配置文件
$parentId = $_POST['parentId'];
$result = array();
$query = "SELECT id, city AS name FROM dedecms_city WHERE pid = $parentId";
$res = mysql_query($query);
while ($row = mysql_fetch_assoc($res)) {
    $result[] = $row;
}
echo json_encode($result);
?>

步骤四：修改自定义表单模板

编辑/templets/default/yourform.htm 文件，增加多级联动的 HTML 代码和引入我们之前写的 JavaScript 文件。

<script type="text/javascript" src="/templets/default/js/jquery3.6.0.min.js"></script>
<script type="text/javascript" src="/templets/default/js/city_cascade.js"></script>
<select id="city_province"></select>
<select id="city_city"></select>
<select id="city_district"></select>

相关问答FAQs

问题一：为什么联动下拉框没有显示数据？

答案：

可能的原因包括：

1、数据库未正确导入数据：请检查dedecms_city 表是否已经成功导入城市数据。

2、JavaScript 文件路径错误：确保city_cascade.js 文件路径正确，并且该文件能够被正确加载。

3、AJAX 请求失败：检查浏览器控制台是否有报错信息，确认get_options.php 是否正常响应。

问题二：如何添加更多级别？

答案：

如果需要添加更多的行政级别（如街道），可以按照以下步骤操作：

1、扩展数据库表：在dedecms_city 表中增加新的字段，例如street。

2、修改 JavaScript 代码：在city_cascade.js 文件中增加对应的逻辑，以支持更多级别的联动。

3、更新表单模板：在 HTML 代码中增加新的下拉框，并在 JavaScript 中绑定事件。