如何在jquery中使用ajax實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)功能-創(chuàng)新互聯(lián)

 
 
 
 
 
 
 
 
 
 

 
 $(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"+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"+lie2[1]+"";
  }
  $("#shi").html(str2);
  }  
 }); 
 })
//輸出區(qū)縣
$("#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"+lie3[1]+"";
  }
  $("#qu").html(str3);
  }  
 });
 })
})
　　

 
 
 
//引入jquery包
 
//引用我們自己封裝的js文件
 
 
 
//id要與封裝的js插件中一致
 

（2）我們自己封裝的js插件

$(document).ready(function(e){
 //扔三個(gè)下拉列表到主頁(yè)面建的div中
 $("#sanji").html(""); 
 //加載省的數(shù)據(jù)
 LoadSheng();
 //加載市的數(shù)據(jù)
 LoadShi();
 //加載區(qū)的數(shù)據(jù)
 LoadQu();
 //給省的下拉列表添加點(diǎn)擊事件，當(dāng)省變化時(shí)，對(duì)應(yīng)的市和區(qū)會(huì)發(fā)生變化
 $("#sheng").click(function(){
 LoadShi();
 LoadQu();
 }) 
 //給市的下拉列表添加點(diǎn)擊事件，當(dāng)市變化時(shí)，對(duì)應(yīng)的區(qū)發(fā)生變化
 $("#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);
 }
 });
}　　

其次就是處理頁(yè)面(兩種方法都用到的)：chuli.php

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實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。