ajax實現(xiàn)三級聯(lián)動的基本方法

更新時間：2017年02月14日 11:45:10 作者：王小明愛紅領巾

這篇文章主要為大家詳細介紹了ajax實現(xiàn)三級聯(lián)動的基本方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了ajax實現(xiàn)三級聯(lián)動的具體代碼，供大家參考，具體內容如下

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

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

2.sanji js處理頁面

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


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

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

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

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


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

3.填充sheng方法

function FillSheng()
{
 
  var pcode = "";//定義一個變量
  $.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頁面

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

ajax實現(xiàn)異步文件或圖片上傳功能
這篇文章主要為大家詳細介紹了ajax實現(xiàn)異步文件（圖片）上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
ajax同步異步簡單實現(xiàn)
本文為大家介紹下ajax同步異步的簡單實現(xiàn)，感興趣的朋友可以參考下
2014-01-01
Ajax異步檢查用戶名是否存在
這篇文章主要為大家詳細介紹了Ajax異步檢查用戶名是否存在的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
AJAX 簡介及入門實例
最近在學校參加暑期實習，參與的是一個社交網站項目，學長那邊分配給的任務是前端開發(fā)，需要學習AJAX技術。
2009-07-07
ajaxFileupload實現(xiàn)多文件上傳功能
這篇文章主要為大家詳細介紹了ajaxFileupload實現(xiàn)多文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
javascript ajax獲取信息功能代碼
本文提供一個思路，通過客戶端與服務端獲取信息，具體什么意思大家自己琢磨，本文只提供Client端代碼，Server端代碼自己去寫，什么語言均可以！
2010-04-04
探討Ajax中的一些小問題
在ajax使用過程經常會遇到各種各樣的問題，今天小編給大家分享ajax中的一些小問題，比較實用，感興趣的朋友可以參考下
2016-05-05
本人ajax留言板的源程序不錯的應用js
本人ajax留言板的源程序不錯的應用js...
2007-09-09
編寫輕量ajax組件第三篇實現(xiàn)
這篇文章主要為大家詳細介紹了輕量ajax組件編寫第三篇實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
AJAX在Post中文的時候亂碼的解決方法
AJAX在Post中文的時候亂碼的解決方法...
2007-03-03