【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来实现图形 ...
随机推荐
- HDU 2255 奔小康赚大钱(KM算法)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=2255 [题目大意] 求最大匹配 [题解] KM模板 [代码] #include <cstdi ...
- 【动态规划】mr354-坐车看球
[题目大意] 两个球队的支持者要一起坐车去看球,他们已经排成了一列.我们要让他们分乘若干辆巴士,同一辆巴士上的人必须在队伍中是连续的.为了在车上不起冲突,希望两队的支持者人数尽量相等,差至多是D.有一 ...
- 【贪心】POJ2393-Yogurt Factory
[思路] 水题,没什么好说的.每周为之后多生产的牛奶可以看作之后才生产的.每周最少生产单价=min(上周生产的最小单价+储存单价,本周生产单价).注意ans是long long,否则会WA. #inc ...
- 【bugku】【RE】file WriteUp
FILE 查壳后显示无壳,拖进IDA: 运行程序时传递的第一个参数为一个文件名,并打开该文件.下面点进去encode函数分析一下: for循环中每三个为一组,进行Base64的操作,接下来两个if分别 ...
- 一段javascript设计模式应用场景
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- lnmp配置信息 4核8g优化
MYSQL my.conf# The following options will be passed to all MySQL clients[client]#password = ...
- 各种GCC
Cross GCC Cygwin GCC Linux GCC MacOSX GCC MinGW GCC Solaris GCC Clang
- 莫名其妙的float:left; 不能使元素紧贴父级的坑
这是项目中遇到的一个CSS的坑,做个记录,主要的原因还是浮动后脱离文档流,两个浮动的元素处于同一文档流中会相互影响位置的问题: 先上代码吧: 效果预览地址:浮动不能靠左的情况; 原本红色模块应该处于蓝 ...
- 推荐一篇讲arm架构gcc内联汇编的文章
这是来自ethernut网站的一篇文章,原文链接: http://www.ethernut.de/en/documents/arm-inline-asm.html 另外,据说nut/os是个不错的开源 ...
- phpok -- 域名问题
nginx会改变连接的baseurl, 所以要改变nginx的server name的配置. 将网站改为静态也需配置nginx.