下面我們用Jquery，ajax,做一個省，市，縣的三級聯動：

下面是我做三級聯動下拉的步驟以及邏輯

第一步：先做一個省市區表格

第二步：建個PHP頁面顯示用我是在

里放用來接收要顯示的省市區表格信息，里面嵌入jquery-1.11.2.min.js和自己封裝的三聯動省市區的方法

第三步：寫封裝方法用JS

第四步：做個純php處理頁面，這個頁面處理傳過來的任何代號

首先我們要建立數據庫：

這就是包含省，市，縣的數據庫。

下面我們就寫主頁面：sanji.php：

Document

然后就是js文件：

// JavaScript Document

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

//向div里面仍三個下拉

var str = "";

$("#sanjiliandong").html(str);//三個下拉顯示

//當省選中的話市也會跟著變去也會變。市和區都會加載一遍

FillSheng();//省

FillShi();//市

FillQu();//區

//給省加點擊事件

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

FillShi();//市

FillQu();//區

})

//給市加點擊事件

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

FillQu();//區

})

});

//做三個方法分別為省市區

//填充省的方法，如何在表里查詢 出省的代號例如：北京0001、天津0001,中國下面所有省都是0001開頭的

function FillSheng()

{

var pcode = "0001";

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

//返回數據,根據行于行之間的分隔符來拆,拆完之后會返回一數組/行的數組

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

var str = "請選擇地區";

//把行的數組遍歷下用for循環...length長度

for(var i=0;i

{

//把行的索引i在拆下.列與列的分隔符再拆

var lie = hang[i].split("^");//這是列的數組

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

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

}

}

});

}

//填充市的方法

function FillShi()

{

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

$.ajax({

async:false,//****

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

//返回數據,根據行于行之間的分隔符來拆,拆完之后會返回一數組/行的數組

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

var str = "請選擇城市";

//把行的數組遍歷下用for循環...length長度

for(var i=0;i

{

//把行的索引i在拆下.列與列的分隔符再拆

var lie = hang[i].split("^");//這是列的數組

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

}

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

}

});

}

//填充區的方法

function FillQu()

{

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

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

//返回數據,根據行于行之間的分隔符來拆,拆完之后會返回一數組/行的數組

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

var str = "請選擇鄉縣";

//把行的數組遍歷下用for循環...length長度

for(var i=0;i

{

//把行的索引i在拆下.列與列的分隔符再拆

var lie = hang[i].split("^");//這是列的數組

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

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

}

}

});

}

之后是查詢數據庫的處理文件：

//處理頁面只有一個功能處理傳過來的所有代號(省、市、區。。。)

include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["pcode"];//取到賦值代號

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

echo $db->StrQuery($sql);

顯示效果如下：

這就是我們要做的省，市，縣的三級聯動。在這里我們重點強調一下一定要做好邏輯關系，想好了在去動手寫代碼，要不然容易混亂，這樣的話就只能從頭開始。

總結

以上是生活随笔為你收集整理的百度云 ajax jquery 三级联动,jQuery ajax实现省市县三级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。