您现在的位置是：首页 > 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自定义函数过滤字符的方法

相关教程

图文教程

相关源码

  • (自适应)游泳馆泳池水处理器设备pbootcms网站模板免费下载专注服务于泳池水处理设备制造商、泳池系统工程商等企业用户。模板预设设备分类体系、技术参数展示模块和解决方案呈现页面，满足行业特有展示需求。查看源码
  • (自适应响应式)高端珠宝首饰奢侈品pbootcms模板下载本模板为珠宝首饰及奢侈品行业打造，采用PbootCMS内核开发，具备卓越的视觉表现力与商业转化能力。自适应设计确保在手机端呈现产品细节，后台数据实时同步，助您高效展示钻石查看源码
  • (自适应响应式)HTML5磁电机械设备蓝色营销型网站pbootcms模板本模板为磁电设备行业设计，采用蓝色营销风格，突出工业设备的专业性和技术感。模板结构清晰，能够有效展示磁电设备的技术参数、应用场景和企业实力，帮助客户快速了解产品特点和公司服务。查看源码
  • (自适应响应式)蓝色律师事务所法务团队网站pbootcms模板为律师事务所和法律服务机构打造的专业网站模板，展现法律专业性与权威性，手工编写标准DIV+CSS代码，结构清晰优化，确保高效运行，自动适配电脑、平板和手机等各类设备，提供更好浏览体验查看源码
  • pbootcms模板PC+WAP娱乐新闻资讯类博客网站源码该模板基于PbootCMS内核开发，专为娱乐新闻、健康生活类资讯网站设计，同时支持快速适配其他行业（如企业官网、博客门户等），仅需替换图文内容即可完成转型。查看源码
  • (自适应)帝国cms7.5文章新闻博客整站源码( 带会员中心)本模板基于帝国CMS内核开发，为新闻资讯、个人博客及作品展示类网站设计。采用响应式布局技术，确保在手机、平板和电脑等不同设备上都能获得良好的浏览体验。查看源码
分享笔记 （共有 篇笔记）
验证码：

大家在看

帝国CMS批量修改内容页文件命名形式方法

本栏推荐

帝国CMS教程建立目录不成功!请检查目录权限的原因和解决方法

相关标签

大家喜欢