帝国cms教程
本栏目提供帝国cms教程,帝国cms视频教程,帝国cms模板制作教程,帝国cms使用教程.
帝国CMS地区联动插件网上很多,但如何配合筛选功能却没有。看到论坛上很多人需要找这个,精准像素www.11px.cn为大家分享一款二次开发的纯JS版的地区联动筛选功能。
首先我们来看看效果
下拉框效果
横向A链接效果
帝国CMS地区联动筛选开发方法
1、首先我们需要下载用到JS插件库,下载地址在下方

2、然后我们新建三个字段,来储存地区内容,字段都为文本输入框。
pro 省份
<div class="m_zlxg" id="shenfen"> <p title=""><?=$ecmsfirstpost==1?"选择省份":ehtmlspecialchars(stripSlashes($r[pro]))?></p> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="pro" type="hidden" id="pro" value="<?=$ecmsfirstpost==1?"":ehtmlspecialchars(stripSlashes($r[pro]))?>" size="">
city 城市
<div class="m_zlxg" id="chengshi"> <p title=""><?=$ecmsfirstpost==1?"选择城市":ehtmlspecialchars(stripSlashes($r[city]))?></p> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="city" type="hidden" id="city" value="<?=$ecmsfirstpost==1?"":ehtmlspecialchars(stripSlashes($r[city]))?>" size="">
area 区县
<div class="m_zlxg" id="quyu"> <p title=""><?=$ecmsfirstpost==1?"选择城市":ehtmlspecialchars(stripSlashes($r[area]))?></p> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="area" type="hidden" id="area" value="<?=$ecmsfirstpost==1?"":ehtmlspecialchars(stripSlashes($r[area]))?>" size="">
3、最后是系统模型表单的代码
<table width='100%' align=center cellpadding=3 cellspacing=1 bgcolor='#DBEAF5' id="dq"> 这里为你的表单代码 <input id="sfdq_num" type="hidden" value="" /> <input id="csdq_num" type="hidden" value="" /> <link rel="stylesheet" type="text/css" href="/e/extend/address/address.css" > <script type="text/javascript" src="/e/extend/address/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/e/extend/address/address.js"></script> <script type="text/javascript"> $(function(){ $("#dq").sjld("#shenfen","#chengshi","#quyu"); }); </script>
主要给表单的table加了一个ID=dq和加载了需要用到JS、CSS。
到此后台的地区联动就完成了。
大致效果是这样了,具体的样式可以自行修改address.CSS的样式。
下面我们来看看纯JS版的地区联动筛选功能前台该如何调用了,精准像素www.11px.cn为大家继续讲解。
前台下拉样式代码
<div class="gp" id="dq"> <form method="get" action="[!--news.url--]e/action/ListInfo.php" class="dqform"> <input value="12" type="hidden" name="mid"> <input value="3" type="hidden" name="classid"> <input value="1" type="hidden" name="ph"> <div class="m_zlxg" id="shenfen"> <p title="">选择省份</p> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="pro" type="hidden" id="pro" value=""> <div class="m_zlxg" id="chengshi"> <p title="">选择城市</p> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="city" type="hidden" id="city" value=""> <div class="m_zlxg" id="quyu"> <p title="">选择城市</p> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="area" type="hidden" id="area" value=""> </FORM> </div> <input id="sfdq_num" type="hidden" value="" /> <input id="csdq_num" type="hidden" value="" /> <link rel="stylesheet" type="text/css" href="/e/extend/address/address.css" > <script type="text/javascript" src="/e/extend/address/address.js"></script> <script type="text/javascript"> $("#dq").sjld("#shenfen","#chengshi","#quyu"); $("#chengshi , #quyu").hide(); window.onload = function() { var pro = "<?php echo $_GET["pro"]?>"; var city = "<?php echo $_GET["city"]?>"; var area = "<?php echo $_GET["area"]?>"; if(pro != ""){ $("#shenfen").find("p").text(pro); }else{ $("#shenfen").on("click","li",function(){ $("#chengshi").show(); }) } if(city != ""){ $("#chengshi").show(); $("#chengshi").find("p").text(city) }else{ $("#chengshi").on("click","li",function(){ $("#quyu").show(); }) } if(area != ""){ $("#quyu").show(); $("#quyu").find("p").text(area) } $("#chengshi").on("click","li",function(){ $("#quyu").show(); }) }; $("#quyu").on("click","li",function(){ $(".dqform").submit(); }); </script>
主要利用的form表单提交+JS来达到下拉筛选的效果。
前台A链接筛选代码
<div class="designer-tip" id="dq"> <form method="get" action="[!--news.url--]e/action/ListInfo.php" class="dqform"> <input value="[!--self.classid--]" type="hidden" name="classid"> <input value="1" type="hidden" name="ph"> <div class="m_zlxg" id="shenfen"> <p>选择省份</p> <span>选择省份</span> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="pro" type="hidden" id="pro" value=""> <div class="m_zlxg" id="chengshi"> <p>选择城市</p> <span>选择城市</span> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="city" type="hidden" id="city" value=""> <div class="m_zlxg" id="quyu"> <p>选择城市</p> <span>选择城市</span> <div class="m_zlxg2"> <ul> </ul> </div> </div> <input name="area" type="hidden" id="area" value=""> </FORM> </div> <input id="sfdq_num" type="hidden" value="" /> <input id="csdq_num" type="hidden" value="" /> <link rel="stylesheet" type="text/css" href="/e/extend/address/address-a.css" > <script type="text/javascript" src="/e/extend/address/address-a.js"></script> <script type="text/javascript"> $(function(){ $("#dq").sjld("#shenfen","#chengshi","#quyu"); $(".m_zlxg2").on("click","li",function(){ $(this).parents(".m_zlxg2").find("li").removeClass("active"); $(this).addClass("active"); }); $("#chengshi , #quyu").hide(); $("#shenfen").on("click","li",function(){ $("#chengshi").show(); }) $("#chengshi").on("click","li",function(){ $("#quyu").show(); }) $("#quyu").on("click","li",function(){ $(".dqform").submit(); }); }); </script>
至此全部分享完毕。
相关推荐
帝国CMS二次开发会员登陆赠送积分
[11-25]帝国CMS二次开发调用当前信息tags
[09-10]帝国CMS二次开发PHP循环栏目和栏目下的信息
[03-20]帝国CMS二次开发调用指定tags分类下的信息
[03-16]帝国CMS二次开发循环自定义列表分类下的所有列表及信息
[04-22]帝国cms二次开发结合项url参数优化
[03-19]帝国CMS二次开发PHP调用语法
[12-11]二次开发中常用的过滤函数
[07-25]帝国CMS二次开发tags增加封面图片
[03-11]帝国CMS二次开发多值字段调用教程
[07-29]帝国CMS二次开发用PHP来替换newsnav功能
[03-16]帝国CMS二次开发内容存文本转存数据库方法
[04-01]帝国CMS二次开发格式实例
[10-17]帝国cms二次开发函数对应文件目录分享
[10-23]帝国CMS二次开发教程
[10-17]
栏目最新
- 帝国CMS二次开发会员登陆赠送积分[11-25]
- 帝国cms目录结构讲解[11-25]
- 帝国CMS上传图片并自动生成缩图教程[11-25]
- 帝国CMS结合JS自定义手机端内容分页样式[11-12]
- 帝国CMS批量设置正文第一张图片为缩略图方法[11-04]
- 帝国CMS批量提取正文内容到简介[11-04]
- 分享帝国CMS随机会员头像的方法[10-26]
- 帝国CMS保存网址快捷方式到桌面[10-25]
栏目热门
- 帝国CMS内容页获取当前栏目ID及父栏目ID方法[06-08]
- 帝国cms二次开发判断会员是否登录 登录后才能看到内容[02-13]
- 新手教程:帝国CMS数据库恢复方法[07-01]
- 帝国CMS教程后台不能登录的原因详解[11-16]
- 帝国CMS列表页面调用关键字方法[06-04]
- 帝国cms7.0整合百度编辑器ueditor教程[05-08]
- 帝国CMS新手教程之留言板系统[04-12]
- 帝国CMS二次开发无刷新Ajax加载更多列表信息插件[11-03]
下载排行
- 帝国CMS新手教程调用栏目别名[04-17]
- 帝国CMS调用网站标题的方法[03-29]
- 帝国CMS新手教程调用网站关键字+描叙的方法[03-29]
- 帝国CMS首页字体不能改颜色的方法[03-29]
- 帝国CMS灵动标签使用方法[03-29]
- 帝国CMS新手教程调用栏目缩略图,可嵌套其他标签[03-29]
- 帝国CMS二次开发整合快车下载[04-04]
- 帝国CMS结合项”您来自的链接不存在“解决方法[04-04]