本文主要為大家詳細介紹了jquery+ajax實現省市區三級連動的相關代碼，包括封裝和不封裝兩種方式，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助大家。
首先，要實現如下圖效果，
1、要理清思路：
先做出三個下拉式選單- ---根據第一個下拉式選單的value值取得第二個下拉清單的內容，第三個同理。
2、用到的資料庫表：Chinastates表
#規則：根據國家級（中國）的areacode查詢省級(如：北京) ;根據省級的areacode查詢市級（如：北京市轄）；根據市級的areacode查詢區級（如東城區）
第一種方式：沒有用到封裝，資料讀取較慢，可以看看原理，這樣在第二種方式封裝時就容易多了。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.11.2.min.js"></script>
</head>
<body>
<select id="sheng"></select>
<select id="shi"></select>
<select id="qu"></select>
</body>
</html>
<script type="text/javascript">
$(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<hang.length;i++)
{
var lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#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<hang2.length;i++)
{
var lie2=hang2[i].split("^");
str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";
}
$("#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<hang3.length;i++)
{
var lie3=hang3[i].split("^");
str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";
}
$("#qu").html(str3);
}
});
})
})
</script> 期間出現的問題：每個下拉清單的第一個資料輸不出來：是因為每個下拉清單的第一個資料的value值都帶有空格！ ！ ！所以在輸出data時要去空格！ ！ ！
data傳回的值可能帶有空格換行等，所以要用trim()方法去空格！ ！ ！
第二種方式：封裝成插件，以後可以隨時呼叫（重要）
（1）主頁：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title><br>//引入jquery包 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件 <script src="sanji.js"></script> </head> <body><br>//id要与封装的js插件中一致 <p id="sanji"></p> </body> </html>
（2）我們自己封裝的js外掛程式
$(document).ready(function(e){
//扔三个下拉列表到主页面建的p中
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
//加载省的数据
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 + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";
}
$("#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 + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";
}
$("#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 + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";
}
$("#qu").html(str);
}
});
} 其次就是處理頁面(兩種方法都用到的)：chuli. php
<?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;
}
}
?>相關推薦：
以上是jquery和ajax實現省市區三級連動封裝和不封裝兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
