帝国CMS7.5实现地区三级联动并且前台可地区筛选的教程
2021-03-09
第一步:后台添加三个数据表字段
字段名: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编码,其他请自己转码
到此后台已经实现添加内容三级联动
在前台显示位置添加一下代码可筛选查,注意两个JS路径
<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>注:四个默认字段mid是模型ID,classid是栏目ID,tempid是列表所使用的模板标签ID,ph是结合项,ph参数是必须等于1的,表示使用结合项,否则不能筛选
JS文件下载 提取码:a3nj
声明:本文来自用户分享和网络收集,仅供学习与参考,测试请备份。