省市区三级联动代码ajax,jquery+ajax实现省市区三级联动 （封装和不封装两种方式）...

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

1、要理清思路：

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

2、用到的数据库表：Chinastates表

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

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

代码如下：

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

//输出省

var code = "0001";

$.ajax({

async:false,

//取消异步

url:"chuli.php",

data:{code:code},

type:"POST",

dataType:"TEXT",

success:function(data){

var hang = data.trim().split("|"); //trim()去空格

var str="";

for(var i=0;i

{

var lie = hang[i].split("^");

str = str+""+lie[1]+"";

}

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

}

});

//输出市

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

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

$.ajax({

async:false,

url:"chuli.php",

data:{code:code2},

type:"POST",

dataType:"TEXT",

success:function(data2){

var hang2 = data2.trim().split("|");

var str2 ="";

for(var i=0;i

{

var lie2=hang2[i].split("^");

str2 = str2 +""+lie2[1]+"";

}

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

}

});

})

//输出区县

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

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

$.ajax({

async:false,

url:"chuli.php",

data:{code:code3},

type:"POST",

dataType:"TEXT",

success:function(data3){

var hang3 = data3.split("|");

var str3 ="";

for(var i=0;i

{

var lie3=hang3[i].split("^");

str3 = str3 +""+lie3[1]+"";

}

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

}

});

})

})

期间出现的问题：每个下拉列表的第一个数据输不出来：是因为每个下拉列表的第一个数据的value值都带有空格！！！所以在输出data时要去空格！！！

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

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

(1)主页面：

//引入jquery包

//引用我们自己封装的js文件

//id要与封装的js插件中一致

(2)我们自己封装的js插件

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

//扔三个下拉列表到主页面建的div中

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

//加载省的数据

LoadSheng();

//加载市的数据

LoadShi();

//加载区的数据

LoadQu();

//给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化

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

LoadShi();

LoadQu();

})

//给市的下拉列表添加点击事件，当市变化时，对应的区发生变化

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

LoadQu();

})

});

//加载省的下拉列表

function LoadSheng() {

var pcode = "0001";

$.ajax({

async: false,

url: "chuli.php",

data: { code: pcode },

type: "POST",

dataType: "TEXT",

success: function(data) {

var hang = data.trim().split("|");

var str = "";

for(var i = 0; i < hang.length; i++) {

var lie = hang[i].split("^");

str = str + "" + lie[1] + "";

}

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

}

});

}

//加载市省的下拉列表

function LoadShi() {

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

$.ajax({

async: false,

url: "chuli.php",

data: { code: pcode },

type: "POST",

dataType: "TEXT",

success: function(data) {

var hang = data.trim().split("|");

var str = "";

for(var i = 0; i < hang.length; i++) {

var lie = hang[i].split("^");

str = str + "" + lie[1] + "";

}

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

}

});

}

//加载省的下拉列表

function LoadQu() {

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

$.ajax({

url: "chuli.php",

data: { code: pcode },

type: "POST",

dataType: "TEXT",

success: function(data) {

var hang = data.trim().split("|");

var str = "";

for(var i = 0; i < hang.length; i++) {

var lie = hang[i].split("^");

str = str + "" + lie[1] + "";

}

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

}

});

}

其次就是处理页面(两种方法都用到的)：chuli.php

$code=$_POST["code"];

require "DB.class.php";

$db=new DB();

$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";

$str=$db->strquery($sql);

echo $str;

最后就是封装的类文件：DB.class.php

function strquery($sql)

{

$db = new MySQLi($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);

return $str;

}

}

?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。