您现在的位置是：首页 > 教程 > 帝国CMS教程帝国CMS教程
帝国cms二次开发实现纯JS版的地区联动筛选功能
雅绿2023-06-12 21:16:39帝国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查询百度是否收录函数，首先打开/e/class/userfun.php添加查询函数，然后到内页面模板添加显示代码，缺点肯定是有点拖页面速度了
帝国CMS教程自定义列表SQL，自定义列表语法教学
帝国CMS自定义列表可以用来实现特定的信息列表。自定义列表教程方法：用户进入后台->模板管理->自定义列表->(右上角)增加自定义列表
帝国CMS调用当前专题信息的方法
调用专题自定义字段，作者：<?=ReturnZtAddField(0,'zuozhe')?>专题图片当前专题内信息
| 留言与评论 （共有 条评论） |
