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. 洛谷 P3943 星空

    题目背景 命运偷走如果只留下结果, 时间偷走初衷只留下了苦衷. 你来过,然后你走后,只留下星空. 题目描述 逃不掉的那一天还是来了,小 F 看着夜空发呆. 天上空荡荡的,没有一颗星星——大概是因为天上 ...

  2. 【图论】Self-Assembly(6-19)

    [UVA1572]Self-Assembly 算法入门经典第6章6-19(P172) 题目大意:有一些正方形,每条边上都有A-~Z- A+~Z+的编号,或者00,A+的边可以拼A-,反之亦然.00的边 ...

  3. 【图论】Popular Cows

    [POJ2186]Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 34752   Accepted: ...

  4. BZOJ 3594 [Scoi2014]方伯伯的玉米田(二维树状数组)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3594 [题目大意] 给出一个数列,选出k个区间使得区间内数全部加1, 求k次操作之后最 ...

  5. 【Matrix-tree定理】【BEST Theorem】hdu6064 RXD and numbers

    题意:给你一张有向图,求从1出发,回到1的欧拉回路数量. 先特判掉欧拉回路不存在时的情况. 看这个吧:http://blog.csdn.net/yuanjunlai141/article/detail ...

  6. Spring p名称空间配置属性

    1.p 名称空间介绍 从 2.0开始,Spring支持使用名称空间的可扩展配置格式.这些名称空间都是基于一种XML Schema定义.事实上,我们所看到的所有bean的配置格式都是基于一个 XML S ...

  7. javascript字符串与数组练习

    <html> <head> </head> <body> <script type="text/javascript"> ...

  8. Linux下KVM的图形界面管理工具(virt-manager)(桌面版)

    背景: virt-manager是用于管理KVM虚拟环境的主要工具,virt-manager默认设置下需要使用root用户才能够使用该工具.当你想在KVM hypervisor服务器上托管虚拟机,由最 ...

  9. easyui-textbox input输入框的一种取值方式

    1.html文件 <td> <input id="clientPhone" type="text" name="clientPhon ...

  10. LaTeX:Figures, Tables, and Equations 插入图表和公式

    Figures To insert a figure in a LaTeX document, you write lines like this: \begin{figure} \centering ...