欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

帝国cms教程

二次开发一个纯JS版的地区联动筛选功能

帝国cms教程 我的站长站 2019-07-18 共326人阅读

帝国CMS地区联动插件网上很多,但如何配合筛选功能却没有。看到论坛上很多人需要找这个,我的站长站www.wdzzz.com为大家分享一款二次开发的纯JS版的地区联动筛选功能。

首先我们来看看效果

二次开发一个纯JS版的地区联动筛选功能

下拉框效果

二次开发一个纯JS版的地区联动筛选功能

横向A链接效果

帝国CMS地区联动筛选开发方法

1、首先我们需要下载用到JS插件库,下载地址在下方

相关信息
帝国CMS地区联动筛选插件
帝国CMS地区联动筛选插件

首先我们来看看帝国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。

到此后台的地区联动就完成了。

二次开发一个纯JS版的地区联动筛选功能

大致效果是这样了,具体的样式可以自行修改address.CSS的样式。

下面我们来看看纯JS版的地区联动筛选功能前台该如何调用了,我的站长站www.wdzzz.com为大家继续讲解。

前台下拉样式代码

<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指定模型下的留言数量 代码:<?php$totalnum=(int)$_GET['totalnum']; $totalquery="select count(*) as total from ***_enewsgbook where bid=1 and chec

    帝国cms教程 239 10年前
  • 帝国cms二次开发怎样实现时间为:几小时前、几天前等格式

    放到:userfun.php <?ph ?>之间

    帝国cms教程 516 8年前
  • 帝国CMS二次开发解决内容关键字替换图片ALT办法

    对于帝国CMS的内容管理程序,个人站长朋友是没有什么说的了,安全又稳定,但再美好的东西也会有一点缺陷,对于内容关键字 图片ALT被替换实属让个人站长头疼的,最近在论坛上面找到了解决的办法,这样我们就可以解决这样的烦心事了! 这个办法是对KissVenus发的解...

    帝国cms教程 514 7年前
  • 帝国CMS二次开发织梦CMS数据转帝国CMS教程

    织梦CMS和帝国CMS哪种好?织梦dedecms是目前CMS开源系统中使用人数最多的CMS系统了,凭借着后台使用简单、模板制作也简单,网上模板素材、教程也非常多,受到大家的追捧。但用过织梦CMS都知道,织梦CMS有两个致命缺点:(1)织梦安全性差漏洞多,经常被黑客攻击,虽然官...

    帝国cms教程 529 5年前
  • 帝国CMS二次开发不开后台定时刷新脚本

    在你的操作系统,如果是linux的话,添加以下计划任务。 * * * * * /usr/bin/php /webrootpath/e/tasks/backend_cronjob.php。把代码传到 /e/tasks/ 下。 这个脚本将替代后台的定时刷新,你不用在开着后台了,它帮你定时刷新。适用场景:全战静态化,需要定时刷...

    帝国cms教程 366 7年前
  • 帝国CMS调用栏目自定义字段方法

    帝国CMS调用栏目自定义字段方法说明:封面模板,列表模板,内容模板都可以用,且调用方式都是一样的调用标签:<?=ReturnClassAddField(0,&#39;自定义字段&#39;)?>调用多个:<?=$value=ReturnClassAddField(1,&#39;自定义字段1,自定义字段2&#39;)?>取值:<?=$val...

    帝国cms教程 144 3年前
  • 帝国CMS新手教程调用栏目别名

    帝国CMS调用网站标题灵动标签调用网站标题:<?=$public_r[sitename]?> 帝国CMS标签调用网站标题:[!--pagetitle--] 帝国CMS调用栏目别名: <?=$class_r[$GLOBALS[navclas

    帝国cms教程 256 10年前
  • 帝国CMS调用网站标题的方法

    帝国CMS_调用网站标题的方法方法1: [!--pagetitle--]方法2:<?=$public_r[sitename]?>

    帝国cms教程 369 10年前
  • 帝国CMS灵动标签调用反馈信息

    语法:[e:loop={'select * from XX_enewsfeedback order by bid desc limit 10',8,24,0}]<li><a><?=$bqr[pinpai]?><?=$bqr[chexin]?></a><a><?=$bqr[title]?></a> (<?=fo

    帝国cms教程 229 10年前
  • 帝国CMS调用今日下载本月下载本周下载排行方法
    帝国CMS调用今日下载本月下载本周下载排行方法

    实现方法:第一步在数据表里添加三个字段:DayHits WeekHits MonthHits 分别设为字段类型为INT第二步打开文件:/e/public/ViewClick/index.php(//digg踩数后面添加如下代码...

    帝国cms教程 600 10年前