帝国CMS7.2实现地区三级联动并且前台可地区筛选的教程
更新时间:2016年1月27日 12:11 点击:2458
帝国CMS的三级联动一直是个痛,以前猪先飞网站长有分享过一篇“帝国CMS可自定义数据的三级联动选择功能教程”非常好用,
今天再分享一款 三级联动代码,同样可以自定义数据,并且附上前台根据三级地区筛选的功能示例代码:
第一步:
后台添加三个数据表字段
字段名: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的,表示使用结合项,否则不能筛选
上一篇: 帝国CMS将TAGS移到基本信息的教程
下一篇: 帝国CMS标题图片实现远程图片下载
相关文章
- ...2015-12-29
- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了JavaScript实现网页下拉列表的省市联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01- 这篇文章主要为大家详细介绍了js实现省级联动,数据结构优化,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-17
- 这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,感兴趣的小伙伴们可以参考一下...2016-04-19
- 这篇文章主要介绍了基于jquery实现省市区三级联动效果,需要的朋友可以参考下...2015-12-27
- 基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省、市、区获取方法类似,PHP中通过参数不同执行不同的select语句。index.html代码:复制...2014-05-31
- 这篇文章主要介绍了省市二级联动小案例讲解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29
- 这篇文章主要介绍了vue+iview的菜单与页签的联动方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-08
- 这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25
- 这篇文章主要为大家详细介绍了支付宝小程序实现省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 帝国CMS的三级联动一直是个痛,以前猪先飞网站长有分享过一篇“帝国CMS可自定义数据的三级联动选择功能教程”非常好用,今天再分享一款 三级联动代码,同样可以自定义数据,并且附...2016-01-27
- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30
- 这篇文章主要介绍了DIV+CSS+jQ实现省市联动可扩展方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下...2016-06-24
- 这篇文章主要介绍了C#省份城市下拉框联动简单实现方法,涉及字典的定义与索引的用法,是非常实用的技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家介绍了jQuery实现多级联动下拉列表查询框,感兴趣的小伙伴们可以参考一下...2016-01-21
- 这篇文章主要为大家详细介绍了微信小程序scroll-view实现左右联动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-24
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,需要的朋友参考下吧...2016-02-09