dede联动js如何正确调用与配置？-DEDE建站-盈思创科技

后端设置：在DedeCMS后台创建和配置联动菜单。
前端模板：在模板文件中放置HTML元素来显示菜单。
JS调用：编写JavaScript代码来初始化联动菜单并处理数据交互。

第一步：后端设置联动菜单

这是所有工作的基础,你需要先在后台定义好你的联动菜单分类和项目。

（图片来源网络，侵删）

登录DedeCMS后台。
进入 [系统] -> [联动菜单管理] -> [增加联动菜单]。
填写菜单信息：
- 菜单名称："地区"。
- 菜单目录：系统会自动生成一个英文名，如 district，这个很重要，前端会用到。
- 是否开启：选择 "是"。
- 分类信息：这是关键，定义你的菜单层级，地区菜单通常是“省份 -> 城市 -> 区县”，你可以在这里添加更多层级。
- 项目：为每个层级添加具体的项目。
  - 父项目：顶级项目（如省份）的父ID为0。
  - 项目名称：如 "广东省"、"北京市"。
  - 项目值：可以是ID或名称，通常用ID更方便。
  - 排序：数字越小，排序越靠前。
保存，重复以上步骤，直到你的所有联动菜单项目和层级都创建完毕。

假设我们创建了一个名为 "地区" 的联动菜单，其目录为 district，结构为 "省份 -> 城市"。

第二步：前端模板准备

在你的模板文件（通常是 article_add.htm 发布文章页，或者 index.htm 首页等）中，你需要放置用来显示联动菜单的 <select> 下拉框。

重要提示：DedeCMS内置了 {dede:channel} 等标签，但没有直接为联动菜单提供像 {dede:linkage} 这样的模板标签，我们通常使用原生HTML，然后通过JavaScript来动态填充数据。

<!-- 在你的模板文件中，article_edit.htm -->
<form name="myform" action="save.php" method="post">
    <!-- 其他表单字段 -->
    <div>
        <label for="province">省份：</label>
        <select name="province" id="province">
            <option value="0">请选择省份</option>
        </select>
    </div>
    <div>
        <label for="city">城市：</label>
        <select name="city" id="city">
            <option value="0">请先选择省份</option>
        </select>
    </div>
    <!-- 其他表单字段 -->
    <button type="submit">提交</button>
</form>

这里我们创建了两个 <select> 元素，并分别设置了 id 为 province 和 city，方便JS操作。

（图片来源网络，侵删）

第三步：编写JS代码实现联动

这是实现动态效果的核心,你需要引入一个JS文件来处理联动菜单的数据请求和渲染。

DedeCMS已经内置了一个处理联动菜单的JS文件：/include/js/duelinkage.js，我们可以直接使用它。

使用DedeCMS内置的 `duelinkage.js` (推荐)

这是最简单、最规范的方法，因为它直接与DedeCMS后端API对接。

引入JS文件：在你的模板文件 <head> 标签内，引入 duelinkage.js。

（图片来源网络，侵删）

<head>
    <meta charset="UTF-8">
    <title>联动菜单示例</title>
    <!-- 引入jQuery，duelinkage.js依赖它 -->
    <script type="text/javascript" src="{dede:global.cfg_cmspath/}/include/dedeajax2.js"></script>
    <script type="text/javascript" src="{dede:global.cfg_cmspath/}/include/jquery/jquery.js"></script>
    <!-- 引入联动菜单JS -->
    <script type="text/javascript" src="{dede:global.cfg_cmspath/}/include/js/duelinkage.js"></script>
</head>

编写初始化脚本：在 <body> 标签结束前，编写JavaScript代码来初始化你的联动菜单。

<body>
    <!-- 你的HTML表单内容 -->
    <div>
        <label for="province">省份：</label>
        <select name="province" id="province">
            <option value="0">请选择省份</option>
        </select>
    </div>
    <div>
        <label for="city">城市：</label>
        <select name="city" id="city">
            <option value="0">请先选择省份</option>
        </select>
    </div>
    <script type="text/javascript">
        // 等待文档加载完成
        $(function(){
            // 初始化联动菜单
            // 参数1: 第一个select的ID
            // 参数2: 第二个select的ID
            // 参数3: 联动菜单在后台设置的目录名 (如 'district')
            // 参数4: 默认选中的项的值 (可选，通常为0)
            // 参数5: 第一个select的默认提示文字 (可选)
            // 参数6: 第二个select的默认提示文字 (可选)
            initLinkage('province', 'city', 'district', 0, '请选择省份', '请选择城市');
        });
    </script>
</body>

代码解释：

$(function(){...})：确保DOM元素加载完成后再执行JS代码。
initLinkage()：这是 duelinkage.js 提供的核心函数。
- 'province' 和 'city' 是我们前面在HTML中定义的 id。
- 'district' 是你在后台创建联动菜单时填写的“菜单目录”，这是连接前后端的关键。
- 当用户选择省份后,duelinkage.js 会自动向DedeCMS发送一个AJAX请求，请求获取该省份下的所有城市，然后动态填充到 id 为 city 的 <select> 中。

手动实现AJAX请求 (更灵活，但代码稍多)

如果你想不依赖 duelinkage.js，或者需要更定制化的功能，可以手动实现AJAX请求。

引入JS文件：你只需要引入jQuery即可。

<head>
    <script type="text/javascript" src="{dede:global.cfg_cmspath/}/include/jquery/jquery.js"></script>
</head>

编写手动AJAX脚本：

<body>
    <div>
        <label for="province_manual">省份：</label>
        <select name="province_manual" id="province_manual">
            <option value="0">请选择省份</option>
        </select>
    </div>
    <div>
        <label for="city_manual">城市：</label>
        <select name="city_manual" id="city_manual">
            <option value="0">请先选择省份</option>
        </select>
    </div>
    <script type="text/javascript">
        $(function(){
            // 1. 加载省份数据
            $.get('/plus/linkage.php?&do=get&linkageid=district&upid=0', function(data){
                // data 是返回的JSON数据
                var provinces = JSON.parse(data);
                var provinceSelect = $('#province_manual');
                provinces.forEach(function(province){
                    provinceSelect.append('<option value="' + province.id + '">' + province.typename + '</option>');
                });
            });
            // 2. 监听省份选择变化，加载城市数据
            $('#province_manual').change(function(){
                var upid = $(this).val(); // 获取选中的省份ID
                var citySelect = $('#city_manual');
                // 清空城市下拉框
                citySelect.empty().append('<option value="0">请选择城市</option>');
                if (upid != 0) {
                    // 发送AJAX请求获取城市
                    $.get('/plus/linkage.php?&do=get&linkageid=district&upid=' + upid, function(data){
                        var cities = JSON.parse(data);
                        cities.forEach(function(city){
                            citySelect.append('<option value="' + city.id + '">' + city.typename + '</option>');
                        });
                    });
                }
            });
        });
    </script>
</body>

代码解释：

我们直接访问DedeCMS处理联动菜单的API：/plus/linkage.php。
?&do=get&linkageid=district&upid=0：这是API的参数。
- do=get：表示获取数据。
- linkageid=district：指定联动菜单的目录名。
- upid=0：表示获取顶级分类（省份）。
当省份选择框的值改变时 (change 事件)，我们获取其 upid，然后再次请求API，这次传入选中的省份ID，从而获取对应的城市列表。
JSON.parse(data)：将服务器返回的JSON字符串解析成JavaScript对象。

总结与建议

特性	方案一 (duelinkage.js)	方案二 (手动AJAX)
易用性	高，一行代码搞定初始化。	低，需要编写较多AJAX代码。
规范性	高，遵循DedeCMS官方规范。	灵活，但需要自己处理数据格式和错误。
依赖	依赖 `duelinkage.js` 和 `jquery.js`。	仅依赖 `jquery.js`。
适用场景	大多数标准场景，快速开发。	需要高度定制化，或与其他复杂逻辑结合。

对于绝大多数用户，强烈推荐使用【方案一】，它简单、可靠，并且是DedeCMS官方支持的方式，只有在方案一无法满足你的特殊需求时，才考虑使用方案二。

希望这个详细的教程能帮助你成功在DedeCMS中调用联动菜单的JavaScript！

dede联动js如何正确调用与配置？

第一步：后端设置联动菜单

第二步：前端模板准备

第三步：编写JS代码实现联动

使用DedeCMS内置的 `duelinkage.js` (推荐)

手动实现AJAX请求 (更灵活，但代码稍多)

总结与建议

相关文章

目录[+]

第一步：后端设置联动菜单

第二步：前端模板准备

第三步：编写JS代码实现联动

使用DedeCMS内置的 duelinkage.js (推荐)

手动实现AJAX请求 (更灵活，但代码稍多)

总结与建议

相关文章

目录[+]

使用DedeCMS内置的 `duelinkage.js` (推荐)