小編給大家分享一下jQuery ajax如何實現(xiàn)省市縣三級聯(lián)動，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：國際域名空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、通渭網(wǎng)站維護、網(wǎng)站推廣。

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

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

第一步：先做一個省市區(qū)表格
第二步：建個PHP頁面顯示用我是在里放

然后就是js文件：

// JavaScript Document
$(document).ready(function(e){
  //向div里面仍三個下拉
   var str = "";
  $("#sanjiliandong").html(str);//三個下拉顯示
       
   
  //當省選中的話市也會跟著變?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"+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"+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"+lie[1]+"";
        
        $("#qu").html(str);
      }
    }
  });
}

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

StrQuery($sql);

顯示效果如下：

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

什么是ajax

ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術，可以通過在后臺與服務器進行少量數(shù)據(jù)交換，使網(wǎng)頁實現(xiàn)異步更新。

以上是“jQuery ajax如何實現(xiàn)省市縣三級聯(lián)動”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！