ajax 实现三级联动，相当于写了一个小插件，用的时候直接拿过来用就可以了，这里我用了数据库中的chinastates表，

数据库内容很多，三级联动里的地区名称都在里面，采用的是代号副代号的方式

比如说北京吧，北京的代号是11，它下面的北京市副代号就11， 北京市的主代号是1101，北京市下面的地区副代号就是1101，调地区的时候可以根据主代号查询和它相同的副代号，就能查询出来

想要让三级联动的内容在页面显示，只需要在页面建一个div就可以了

下面考虑的是要有省市区这三列，这三列用的是下拉列表，那么里面要用 因为是用js和jquery来写，那么首先要考虑的就是要引入jquery包和js文件，然后把写三个下拉列表

$(document).ready(function(e){

var str=""; //先写三个下拉列表放到div里面

$("#sanji").html(str);

fullsheng();

fullshi();

fullqu();

$("#sheng").change(function(){

fullshi();

fullqu();

})

$("#shi").change(function(){

fullqu();

})

//加载省份信息

function fullsheng()

{

var pcode="0001";//根据父级代号查数据

$.ajax({

async:false, //采用异步的方式

url:"sanjichuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"JSON",

success:function(data){

//这里传过来的data是个数组

str="";

for(var j in data)//js中的遍历数组用for来表示

{

str +=""+data[j].AreaName+"";

}

$("#sheng").html(str);

}

})

}

//加载市的信息

function fullshi()

{

var pcode=$("#sheng").val();

$.ajax({

async:false,

url:"sanjichuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"JSON",

success:function(data){

//这里传过来的data是个数组

str="";

for(var j in data)//js中的遍历数组用for来表示

{

str +=""+data[j].AreaName+"";

}

$("#shi").html(str);

}

})

}

// 加载区的信息

function fullqu()

{

var pcode=$("#shi").val();

$.ajax({

url:"sanjichuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"JSON",

success:function(data){

//这里传过来的data是个数组

str="";

for(var j in data)//js中的遍历数组用for来表示

{

str +=""+data[j].AreaName+"";

}

$("#qu").html(str);

}

})

}

})

这里用的是dataType:"JSON" 之前都是用"TEXT" JSON 的话  我们用到的是数组，那么我们就需要遍历数组，取到每一条数据，在js中遍历数组用到的是for(){} 来遍历数组。

最后要说的是处理页面了，是一个纯PHP的页面，因为之前 dataType用的是JSON 那么处理页面输出应该也是一个数组才对，这样的话，处理页面就不能字符串拼接了，这里我在调用数据库的封装页面写了一个JsonQuery方法

function JsonQuery($sql,$type=1)

{

$db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);

$result=$db->query($sql);

if($type=="1")

{

$arr=$result->fetch_all(MYSQLI_ASSOC);

return json_encode($arr);

}

else

{

return $result;

}

}

然后在写处理页面的时候就很方便使用了

$pcode=$_POST["pcode"];

include("DADB.class.php");

$db=new DADB();

$sql="select * from chinastates WHERE parentareacode='{$pcode}'";

echo $db->JsonQuery($sql);

这样三级联动就可以完成了 ，如下图所示

AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化

& ...

在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

ajax 实现三级联动下拉菜单

ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

PHP ajax 实现三级联动

在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

完整的Ajax及三级联动小练习

Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

Ajax实现三级联动(0520)

查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

php+ajax的三级联动下拉菜单

封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js

基于jQuery的AJAX实现三级联动菜单

最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件:

随机推荐

RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

tableau 连接R语言

如何开始使用 Tableau 与 R? 对于已经熟悉 R 及其功能的用户而言,在 R 与 Tableau 之间建立连接非常简单.以 下说明适用于基于开源版 R 的新安装.其他一些方案也可能使用其他程序 ...

setNeedsDisplay，setNeedsLayout

UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到UIGraph ...

1230: [Usaco2008 Nov]lites 开关灯

1230: [Usaco2008 Nov]lites 开关灯 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1162  Solved: 589[Sub ...

自定义一个全屏的AlertDialog。

........... final MyDialog dialog = new MyDialog(this); LayoutInflater inflater = getLayoutInflater( ...

20181207_Second_小结

1. 上下 200*200 盒子的重叠,切记用 absolute 绝对定位 为最佳解决方案 2. 移动端多使用 粘连布局 < ...

Lecture5&lowbar;1&amp&semi;5&lowbar;2&period;随机变量的数字特征(数学期望、方差、协方差)

一.数学期望 1.离散型随机变量的数学期望 设X为离散随机变量,其概率分布为:P(X=xk)=pk 若无穷级数$\sum_{k=1}^{+\infty}x_kp_k$绝对收敛 (即满足$\sum_{k ...

Spring Boot的应用启动器

Spring Boot应用启动器基本的一共有44种,具体如下: 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2)spring- ...

生成对抗网络(GAN)

GAN的全称是 Generative Adversarial Networks,中文名称是生成对抗网络.原始的GAN是一种无监督学习方法,巧妙的利用“博弈”的思想来学习生成式模型. 1 GAN的原理 ...

将nginx添加至service服务

一.问题描述: 无法用service命令启动nginx 二.问题分析: /etc/init.d/目录下缺少nginx默认启动脚本 三.问题解决: 在/etc/init.d/路径下添加脚本文件,名称为n ...