您现在的位置是：首页 > cms教程 > 帝国CMS教程帝国CMS教程
帝国cms二次开发实现纯JS版的地区联动筛选功能
雅绿2023-06-12帝国CMS教程已有人查阅
导读帝国CMS地区联动插件网上很多，但如何配合筛选功能却没有。看到论坛上很多人需要找这个，我的站长站www.ebingou.cn为大家分享一款二次开发的纯JS版的地区联动筛选功能。
帝国CMS地区联动插件网上很多，但如何配合筛选功能却没有。看到论坛上很多人需要找这个，我的站长站www.ebingou.cn为大家分享一款二次开发的纯JS版的地区联动筛选功能。
帝国CMS地区联动筛选开发方法
1、首先我们需要下载用到JS插件库，
首先我们来看看帝国CMS地区联动筛选插件的效果下拉框效果横向A链接效果帝国CMS地区联动筛选插件方法1、新建3个省、市、区字段2、修改模型表单，加载JS、css样式3、...
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.ebingou.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功能开发
很赞哦！ ()
相关教程
图文教程
帝国CMS灵动标签排行榜式的带序号的列表方法
很多网站都会使用到带序号的列表样式，非常美观，如下图所示：想制作这种效果，必须列表输出不出的命名，如下例：帝国CMS灵动标签调用列表可以输入为这样的列表，代码如下：
帝国cms删除下载地址两个空格的解决方法
帝国cms默认[!--downpath--]调用下载地址标签会有两个空格，是为了让多个下载地址间隔开来。但在写CSS的时候这2个空格会影响布局，那么如何删除了？
帝国cms数据表phome_enewspageclass自定义页面分类表
下方为帝国cms数据表phome_enewspageclass自定义页面分类表的字段类型和解释，方便大家查阅。
帝国CMS内容关键字怎么替换图片标签
之前发过一种帝国CMS内容关键字替换图片标签解决方法，今天在网络上看到了一个更简单方法，分享给大家。帝国CMS内容关键字替换图片标签解决方法
相关源码
-
(自适应)英文绿色精密模具零件加工五金零件pbootcms外贸网站模板本模板基于PbootCMS开发，为五金零件、精密模具加工等英文外贸企业设计。采用响应式布局，适配各类移动设备，是五金零件企业开展国际贸易的专业展示平台。查看源码 -
(自适应响应式)宠物经验资讯咨询博客pbootcms网站源码下载除宠物资讯领域外，通过内容替换可快速适配宠物用品商城、宠物医疗咨询平台、宠物训练教程网站、动物保护组织官网、水族爱好者社区等垂直领域。查看源码 -
(PC+WAP)蓝色五金机械设备营销型网站源码下载基于PbootCMS内核开发的营销型企业网站模板，为五金机械设备类企业打造，通过标准化数字展示提升客户转化率。模板采用模块化设计，可快速适配机床工具、建筑五金、阀门管件等细分领域。查看源码 -
自适应黑色建筑装饰设计公司个人工作室pbootcms模板基于PbootCMS内核开发的黑金风格模板，为建筑装饰、工程设计类企业打造，采用开源架构，支持跨行业快速适配，核心优势如下： 查看源码 -
帝国cms淘宝客京东联盟网站整站源码下载本模板基于帝国CMS内核深度开发，为淘宝客行业量身定制。随着腾讯微信与淘宝生态的互联互通，淘宝客链接现可在微信、QQ等平台直接分享，为推广带来更多便利。模板特别优化了店铺推广功能，有效避免商品下架导致的链接失效问题，同时支持京东联盟等多平台商品推广。查看源码 -
自适应html5二极管LED灯具灯饰类企业网网站模板该PbootCMS内核开发的响应式模板专为LED照明、灯具制造类企业设计，通过HTML5技术实现手机与PC端自适应显示，确保跨设备访问体验一致。企业可快速替换图文内容适配其他工业领域查看源码
| 分享笔记 （共有 篇笔记） |
