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

下面是我做三級聯(lián)動下拉的步驟以及邏輯

第一步：先做一個省市區(qū)表格

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

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

第三步：寫封裝方法用JS

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

首先我們要建立數(shù)據(jù)庫：

這就是包含省，市，縣的數(shù)據(jù)庫。

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

Document

然后就是js文件：

// JavaScript Document

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

//向div里面仍三個下拉

var str = "";

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

//當(dāng)省選中的話市也會跟著變?nèi)ヒ矔儭Ｊ泻蛥^(qū)都會加載一遍

FillSheng();//省

FillShi();//市

FillQu();//區(qū)

//給省加點擊事件

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

FillShi();//市

FillQu();//區(qū)

})

//給市加點擊事件

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

FillQu();//區(qū)

})

});

//做三個方法分別為省市區(qū)

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

function FillSheng()

{

var pcode = "0001";

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

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

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

var str = "請選擇地區(qū)";

//把行的數(shù)組遍歷下用for循環(huán)...length長度

for(var i=0;i

{

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

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

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){

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

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

var str = "請選擇城市";

//把行的數(shù)組遍歷下用for循環(huán)...length長度

for(var i=0;i

{

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

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

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

}

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

}

});

}

//填充區(qū)的方法

function FillQu()

{

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

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

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

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

var str = "請選擇鄉(xiāng)縣";

//把行的數(shù)組遍歷下用for循環(huán)...length長度

for(var i=0;i

{

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

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

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

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

}

}

});

}

之后是查詢數(shù)據(jù)庫的處理文件：

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

include("DBDA.class.php");

$db = new DBDA();

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

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

echo $db->StrQuery($sql);

顯示效果如下：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。