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

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在jquery中使用ajax實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),政和網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:政和等地區(qū)。政和做網(wǎng)站價(jià)格咨詢:18980820575

第一種方式：沒(méi)有用到封裝，數(shù)據(jù)讀取較慢，可以看看原理，這樣在第二種方式封裝時(shí)就容易多了。

代碼如下：

<!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);
  }  
 }); 
 })
//輸出區(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<hang3.length;i++)
  {
   var lie3=hang3[i].split("^");
   str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";
  }
  $("#qu").html(str3);
  }  
 });
 })
})
</script>

期間出現(xiàn)的問(wèn)題：每個(gè)下拉列表的第一個(gè)數(shù)據(jù)輸不出來(lái)：是因?yàn)槊總€(gè)下拉列表的第一個(gè)數(shù)據(jù)的value值都帶有空格！?。∷栽谳敵鰀ata時(shí)要去空格?。?！

data返回的值可能帶有空格換行等，所以要用trim()方法去空格?。?！

第二種方式：封裝成插件，以后可以隨時(shí)調(diào)用（重要）

（1）主頁(yè)面：

<!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插件中一致
 <div id="sanji"></div>
 </body>
</html>

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

$(document).ready(function(e){
 //扔三個(gè)下拉列表到主頁(yè)面建的div中
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 
 //加載省的數(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 + "<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);
 }
 });
}

其次就是處理頁(yè)面(兩種方法都用到的)：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實(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)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+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)景需求。

標(biāo)題名稱：如何在jquery中使用ajax實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)功能-創(chuàng)新互聯(lián)
文章鏈接：http://chinadenli.net/article6/dhjeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站制作、商城網(wǎng)站、域名注冊(cè)、做網(wǎng)站、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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