jquery ajax实现省市区三级联动（封装和不封装两种方式)

首先，要实现如下图效果，

1、要理清思路：

先做出三个下拉菜单-根据第一个下拉菜单的价值值获取第二个下拉列表的内容，第三个同理。

2、用到的数据库表：中国国家表

规律：根据国家级（中国)的区号查询省级（如：北京) ;根据省级的区号查询市级（如：北京市辖);根据市级的区号查询区级（如东城区)

第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title script src=' http :/jquery-1。11 .2 .量滴js/script/head body select id=' sheng '/select select select id=' Shi '/select select select select id=' qu '/select/body/html script type=' text/JavaScript ' $(document).就绪（功能(e){ //输出省定义变量代码=' 0001 ';$.ajax({ async:false，//取消异步url:'chuli.php '，data:{code:code}，type:'POST '，dataType:'TEXT '，success :函数(数据){ var hang=data。trim().拆分(' | ');//修剪()去空格var str=for(var I=0；ihang . lentigi){ var lie=hang[I].split('^')；str=str ' option value=' lie[0]' ' ' lie[1]'/option '；} $(“# sheng”).html(字符串);} });//输出市$('声').click(function(){ var代码2=$(' # sheng ')).val()；$.ajax({ async:false，url:'chuli.php '，data:{code:code2}，type:'POST '，dataType:'TEXT '，success :函数(数据2){ var hang 2=数据2。trim().拆分(' | ');var str 2=for(var I=0；ihang 2。长度；i ) { var lie2=hang2[i].split('^')；str2=str2 '选项值=' lie 2[0]' ' ' lie 2[1]'/option '；} $('#shi ').html(字符串2)；} });})//输出区县$('#shi ').单击(function(){ var code3=$('#shi ').val()；$.ajax({ async:false，url:'chuli.php '，data:{code:code3}，type:'POST '，dataType:'TEXT '，success :函数(数据3){ var hang 3=数据3。拆分(' | ')；var str 3=for(var I=0；ihang3。长度；i ) { var lie3=hang3[i].split('^')；str3=str3 '选项值=' lie 3[0]' ' ' lie 3[1]'/option '；} $('#qu ').html(字符串3)；} });})})/脚本期间出现的问题：每个下拉列表的第一个数据输不出来：是因为每个下拉列表的第一个数据的价值值都带有空格！所以在输出数据时要去空格！

数据返回的值可能带有空格换行等，所以要用修剪()方法去空格！

第二种方式：封装成插件，以后可以随时调用（重要)

(1)主页面：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title br/引入jquery包脚本src='http:/jquery-1。11 .2 .量滴js '/脚本br/引用我们自己封装的射流研究…文件脚本src=' http :三际。js '/脚本/头体br//id要与封装的射流研究…插件中一致div id='三际/div /body/html(2)我们自己封装的射流研究…插件

$(文档)。就绪（功能(e){ //扔三个下拉列表到主页面建的差异中$(' #三际')。html(' select id=' sheng '/select select select id=' Shi '/select select select select id=' qu '/select ')；//加载省的数据load sheng()；//加载市的数据荷载石()；//加载区的数据LoadQu()；//给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化$('声').单击(function(){ LoadShi()；LoadQu()；}) //给市的下拉列表添加点击事件，当市变化时，对应的区发生变化$('#shi ').单击(函数(){ Loadqu()；}) });//加载省的下拉列表函数load sheng(){ var pcode=' 0001 '；$.ajax({ async: false，url: 'chuli.php '，data: { code: pcode }，type: 'POST '，dataType: 'TEXT '，success:函数（数据){ var hang=data.trim().拆分(' | ');var str=for(var I=0；我挂。长度；i ) { var lie=hang[i].split('^')；str=str ' option value=' lie[0]' ' ' lie[1]'/option '；} $(“# sheng”).html(字符串);} });}//加载市省的下拉列表函数LoadShi() { var pcode=$('#sheng ').val()；$.ajax({ async: false，url: 'chuli.php '，data: { code: pcode }，type: 'POST '，dataType: 'TEXT '，success:函数（数据){ var hang=data.trim().拆分(' | ');var str=for(var I=0；我挂。长度；i ) { var lie=hang[i].split('^')；str=str ' option value=' lie[0]' ' ' lie[1]'/option '；} $('#shi ').html(字符串);} });}//加载省的下拉列表函数LoadQu() { var pcode=$('#shi ').val()；$.ajax({ url: 'chuli.php '，data: { code: pcode }，type: 'POST '，dataType: 'TEXT '，success:函数（数据){ var hang=data.trim().拆分(' | ');var str=for(var I=0；我挂。长度；i ) { var lie=hang[i].split('^')；str=str ' option value=' lie[0]' ' ' lie[1]'/option '；} $('#qu ').html(字符串);} });}其次就是处理页面（两种方法都用到的):chuli.php

？PHP $ code=$ _ POST[' code ']；需要“db。上课。PHP”；$ db=新DB()；$sql='从中国选择区号，区域名称，其中parent area code=' { $ code } $ str=$ db-strquery($ SQL)；echo $ str最后就是封装的类文件：DB.class.php

函数strquery($ SQL){ $ db=new MySQL($ this-host，$this-uid，$this-pwd，$ this-dbname)；$ result=$ db-query($ SQL)；$ arr=$ result-fetch _ all()；$ str=foreach($ arr as $ v){ $str=$str.implode('^',$v).'|';} $str=substr($str，0，strlen($ str)-1)；返回$ str}}？以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。