1、本篇教程以ajax+php动态展示【省、市、县、镇】四级地区单位

2、效果图:   

3、不废话,贴代码!

HTML:

          <div class="form-group">
<label class="col-sm-3 control-label" for="onecity">
地区分类
<span class="text-danger">*</span>
</label>
<div class="col-sm-2">
<select class="form-control" id="onecity" name="onecity" onchange="city()">
<option value="">请选择一级地区</option>
{loop $one $v}
<option value="{$v['id']}">{$v['name']}</option>
{/loop}
</select>
</div>
<!-- 二级城市 -->
<div class="col-sm-2" id="ss">
</div>
<!-- 三级城市 -->
<div class="col-sm-2" id="ss2">
</div>
<div class="col-sm-2" id="ss3">
</div>
<script text="text/javascript">
function city(){
var one=$("#onecity").val();
$.ajax({
type: "POST",
url: "/index.php?do=pubh***_third&id=19&step=step1_third&fc=1&one="+one,
success: function(msg){
$("#ss").empty();
$("#ss").append(msg);
}
});
}
</script>
<script text="text/javascript">
function city2(){
var two=$("#twocity").val();
$.ajax({
type: "POST",
url: "/index.php?do=pubh***_third&id=19&step=step1_third&fc=2&two="+two,
success: function(msg){
$("#ss2").empty();
$("#ss2").append(msg);
}
});
}
</script>
<script text="text/javascript">
function city3(){
var three=$("#threecity").val();
$.ajax({
type: "POST",
dataType: 'json',
url: "/index.php?do=pubh***_third&id=19&step=step1_third&fc=3&three="+three,
success: function(res){
$("#ss3").empty();
if(res.data!='error'){
$("#ss3").append(res.data);
}
}
});
}
</script>
</div>

php:

        //1、首先将省级单位给输出到页面 -- 1225
$one=db_factory::get_table_data("*",'w***_district','upid=0'); //2、ajax动态判断传过来的pid(省),获取市级单位,并动态输出<select><option>数据html
if($_R[fc]==1){
if($_R['one']){
$msg=db_factory::get_table_data("*","w***_district","upid=".$_R['one']);
}
$dis='<select class="form-control" name="twocity" id="twocity" onchange="city2();choose_village();"><option value="">请选择二级地区</option>';
foreach($msg as $v){
$dis.='<option value="'.$v[id].'">'.$v[name].'</option>';
}
$dis.='</select>';
echo $dis;
die;
}
if($_R[fc]==2){
if($_R['two']){
$msg=db_factory::get_table_data("*","w***_district","upid=".$_R['two']);
}
$dis='<select class="form-control" name="threecity" id="threecity" onchange="city3();"><option value="">请选择三级地区</option>';
foreach($msg as $v){
$dis.='<option value="'.$v[id].'">'.$v[name].'</option>';
}
$dis.='</select>';
echo $dis;
die;
}
if($_R[fc]==3){
if($_R['three']){
$msg=db_factory::get_table_data("*","wi***_district","upid=".$_R['three']);
}
/* 四级单位有可能没有的,比如直辖市、自治州 */
if($msg){
$dis='<select class="form-control" name="fourcity" id="fourcity" ><option value="">请选择四级地区</option>';
foreach($msg as $v){
$dis.='<option value="'.$v[id].'">'.$v[name].'</option>';
}
$dis.='</select>';
kekezu::echojson("",1,$dis);
//echo $dis;
die;
}
else{
kekezu::echojson("",2,'error');//参数依次msg、status、data
die ();
}
}

到这里就结束了,很简答的一个ajax应用。

【ajax+php】动态展示4级单位(省、市、县、镇)的更多相关文章

  1. 微信小程序结合后台数据管理实现商品数据的动态展示、维护

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...

  2. echarts 地图 动态 展示 结合css+js

    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...

  3. 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...

  4. 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序

    面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...

  5. PHP+Jquery+Ajax 实现动态生成GUID、加载GUID

    GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...

  6. 在Winform系统界面中对进展阶段的动态展示和处理

    在我们做客户关系管理系统的Winform界面的时候,需要对进展阶段这个属性进行一个方便的动态切换和标记处理,如我们根据不同的进展阶段显示不同的相关信息,也可以随时保存当前的阶段信息.其实也是一个比较常 ...

  7. JAVAEE——宜立方商城09:Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存

    1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...

  8. ajax获取动态列表数据后的分页问题

    ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数 ...

  9. [python] 排序的动态展示

    两句闲话 本文所说的排序是指基于交换的排序.因此,按理来说,本文应该叫基于交换的排序的动态展示,但是这样太拗口了. 效果展示 最终效果如下. 实现方法 需要说明的是,在这里是通过pygame来实现图形 ...

随机推荐

  1. java-多线程-一道阿里面试题分析

    这段代码大多数情况下运行正常,但是某些情况下会出问题.什么时候会出现什么问题?如何修正?可见博客 http://yueyemaitian.iteye.com/blog/1387901 1.public ...

  2. DP套DP

    DP套DP,就是将内层DP的结果作为外层DP的状态进行DP的方法. [BZOJ3864]Hero meet devil 对做LCS的DP数组差分后状压,预处理出转移数组,然后直接转移即可. tr[S] ...

  3. 【推导】计蒜客17116 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 C. Sum

    题意:S(x)被定义为x的十进制表示下的数位之和.给你x,让你找一个正整数k,使得S(kx)能被233整除.k不超过2千位. 由于x不超过1000000,不论x是多少,10000000重复233次一定 ...

  4. 都9102年了,还不会Docker?10分钟带你从入门操作到实战上手

    Docker简述 Docker是一种OS虚拟化技术,是一个开源的应用容器引擎.它可以让开发者将应用打包到一个可移植的容器中,并且该容器可以运行在几乎所有linux系统中(Windows10目前也原生支 ...

  5. 深入解析SQL Server并行执行原理及实践

    http://dbaplus.cn/news-21-431-1.html

  6. subline text 工具快捷键说明

    编辑 ctrl + enter           光标当前行下一行新增一行,并且光标跳到下一行进行编辑 ctrl + shift +enter  光标当前行上一行新增一行,并且光标跳到上一行进行编辑 ...

  7. JAVA常见集合类

    菜鸟教程 http://www.runoob.com/java/java-collections.html TreesSet原理: https://blog.csdn.net/wangyunpeng0 ...

  8. 使用神经网络识别手写数字Using neural nets to recognize handwritten digits

    The human visual system is one of the wonders of the world. Consider the following sequence of handw ...

  9. 二十四种设计模式:代理模式(Proxy Pattern)

    代理模式(Proxy Pattern) 介绍为其他对象提供一个代理以控制对这个对象的访问. 示例有一个Message实体类,某对象对它的操作有Insert()和Get()方法,用一个代理来控制对这个对 ...

  10. libev客户端

    #include <ev.h> #include <stdio.h> #include <netinet/in.h> #include <stdlib.h&g ...