使用ajax怎么實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)

本篇文章為大家展示了使用ajax怎么實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、域名與空間、虛擬空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

1.首先在一個(gè)頁(yè)面上布置一個(gè)div 方便日后引用方法

<body>
<div id="sanji">//div的id為“sanji”
</div>

2.sanji js處理頁(yè)面

$(document).ready(function(){
    
   //向div里面放三個(gè)下拉菜單
  var str = "<select id='sheng'></select>
    <select id='shi'></select>
    <select id='qu'></select>";
  //給三個(gè)下拉列表定義 str 變量
  
  $("#sanji").html(str);


  FillSheng();
  FillShi();
  FillQu();//Sheng Shi Qu的邏輯順序 

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

     FillShi();
     FillQu();
   })//給sheng菜單添加點(diǎn)擊事件

   $("#shi").change(function(){
   FillQu();
  })//給shi菜單添加點(diǎn)擊事件


});//頁(yè)面加載完成之后過來執(zhí)行某些代碼

3.填充sheng方法

function FillSheng()
{
 
  var pcode = "";//定義一個(gè)變量
  $.ajax({
     
     url:"chuli.php",
     data:{pcode:pcode},
     type:"POST",
     dataType:"TEXT",
     success:function(data){
              var hang = data.split("^");
              str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

      }
     $("#sheng").html(str);

     });

}

2.填充shi方法

function FillShi()
{
 var pcode = $("#sheng").val();
 $.ajax({
   async:false,
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
     }
     $("#shi").html(str);
    }
  });
}

3.填充qu方法

function FillQu()
{
 var pcode = $("#shi").val();
 $.ajax({
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
     }
     $("#qu").html(str);
    }
  });
}

4.chuli頁(yè)面

<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

上述內(nèi)容就是使用ajax怎么實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)名稱：使用ajax怎么實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
文章URL：http://muchs.cn/article22/ipidcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、、網(wǎng)站設(shè)計(jì)

聲明：本網(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í)需注明來源：創(chuàng)新互聯(lián)

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