【ajax+php】动态展示4级单位(省、市、县、镇)
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级单位(省、市、县、镇)的更多相关文章
- 微信小程序结合后台数据管理实现商品数据的动态展示、维护
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...
- echarts 地图 动态 展示 结合css+js
echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...
- 利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...
- PHP+Jquery+Ajax 实现动态生成GUID、加载GUID
GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...
- 在Winform系统界面中对进展阶段的动态展示和处理
在我们做客户关系管理系统的Winform界面的时候,需要对进展阶段这个属性进行一个方便的动态切换和标记处理,如我们根据不同的进展阶段显示不同的相关信息,也可以随时保存当前的阶段信息.其实也是一个比较常 ...
- JAVAEE——宜立方商城09:Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存
1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...
- ajax获取动态列表数据后的分页问题
ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数 ...
- [python] 排序的动态展示
两句闲话 本文所说的排序是指基于交换的排序.因此,按理来说,本文应该叫基于交换的排序的动态展示,但是这样太拗口了. 效果展示 最终效果如下. 实现方法 需要说明的是,在这里是通过pygame来实现图形 ...
随机推荐
- 原型开发工具 mockplus
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 原型开发工具 mockplus 微信(演示) - Mockup Plus Web Ap ...
- rxjava 视频
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha Rxjava-基础篇视频教程-Rxjava框架的使用-麦子学院 它的自我介绍,我们可以理 ...
- 最优贸易 NOIP 2009 提高组 第三题
题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分 为双向通行的道路 ...
- HihoCoder - 1715 树的连通问题
题面在这里! 正式告别文化课回归的第一题QWQ,然鹅半个月之后还是要退役QWQWQWQWQ 好像很久之前就见过的一个题,当时只会打一打 O(N^2) 的暴力QWQ,正好今天又写了遍这个暴力用来对拍23 ...
- Codeforces 741B Arpa's weak amphitheater and Mehrdad's valuable Hoses
[题目链接] http://codeforces.com/problemset/problem/741/B [题目大意] 给出一张图,所有连通块构成分组,每个点有价值和代价, 要么选择整个连通块,要么 ...
- 搭建vsftpd
安装完软件以后 1.建立用户 adduser ftp passwd 密码 2.修改vsftp.conf文件 anonymous_enable改为NO,阻止匿名上传 Anon_mkdir_write_e ...
- SQL 中 HAVING 用法
现在 Student表有 如下数据 现需求如下: 查找每个老师的学生的平均年龄且平均年齿大于12 不使用 HAVING SELECT * FROM (SELECT TeacherID, AVG(Age ...
- mysql mapper 大于小于号 tag name expected
xml文件的某些特殊字符是自动转义的, 我们不希望它被转义,可以用<![CDATA[]]>, xml解析器会忽视CDATA中的内容, 比如:<![CDATA[<]]> 或 ...
- jquery滚动条插件nanoscroller的应用
默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款jQuery 插件nanoscroller ,可以自定义滚动条的样式. 应用: 1.引入样式 nanoscroller.css <link ...
- sonar如何添加自定义JAVA规则
参考: 1.https://segmentfault.com/a/1190000008659108 2.https://docs.sonarqube.org/display/DEV/Adding+Co ...