帝国CMS7.2实现地区三级联动并且前台可地区筛选教程效果展示:

第一步:后台添加三个数据表字段
字段名:pro
字段标识:省输入表单替换html代码:
<select name="pro"></select>字段名:city
字段标识:市输入表单替换html代码:
<select name="city"></select>字段名:area
字段标识:县输入表单替换html代码:
<select name="area"></select>第二步:建立完毕后,在到
管理系统模型 修改生成相应的表单!
三个字段设为
提交项 可添加 修改 列表显示 结合项第三步:打开
e/admin/AddNews.php 文件
把以下代码粘贴到结尾的随便位置即可
<script type="text/javascript" src="selects.js"></script>
<script type="text/javascript" src="data_china.js"></script>
<script type="text/javascript">
var s = selects;
//获取对象
var p = document.getElementsByName('pro')[0];//省
var c = document.getElementsByName('city')[0];//市
var a = document.getElementsByName('area')[0];//区
//绑定数据
s.bind(p,province);
s.bind(c,city);
s.bind(a,area);
//确定从属关系
s.parent(p,c);
s.parent(c,a);
//设置默认值
s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'});
s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'});
s.selected(a,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'});
</script>第四步:下载底部连接中的两个JS上传到 e/admin/JS为UTF-8编码,其他请自己转码
到此后台已经实现添加内容三级联动
第五步:在前台显示位置添加一下代码可筛选查
<script type="text/javascript" src="[!--news.url--]js/selects.js"></script>
<script type="text/javascript" src="[!--news.url--]js/data_china.js"></script>
<form method="get" action="[!--news.url--]e/action/ListInfo.php">
<input value="10" type="hidden" name="mid">
<input value="17" type="hidden" name="classid">
<input value="1" type="hidden" name="ph">
<input value="12" type="hidden" name="tempid">
<select name="pro"></select>
<select name="city"></select>
<select name="area"></select>
<INPUT value="确定" type="submit" name="提交">
</FORM>
<script type="text/javascript">
var s = selects;
//获取对象
var p = document.getElementsByName('pro')[0];//省
var c = document.getElementsByName('city')[0];//市
var a = document.getElementsByName('area')[0];//区
//绑定数据
s.bind(p,province);
s.bind(c,city);
s.bind(a,area);
//确定从属关系
s.parent(p,c);
s.parent(c,a);
//设置默认值
s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'});
s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'});
s.selected(a,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'});
</script>注意两个JS路径注意:四个默认字段mid是模型ID,classid是栏目ID,tempid是列表所使用的模板标签ID,ph是结合项,ph参数是必须等于1的,表示使用结合项,否则不能筛选
JS下载地址:https://yunpan.cn/cxe5zyBtDEXPe (提取码:0dc2)