DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery ajax實現省市縣三級聯動
jQuery ajax實現省市縣三級聯動
編輯:JQuery入門技巧     

下面我們用Jquery,ajax,做一個省,市,縣的三級聯動:

下面是我做三級聯動下拉的步驟以及邏輯

第一步:先做一個省市區表格
第二步:建個PHP頁面顯示用我是在<body>裡放<div>用來接收要顯示的省市區表格信息,裡面嵌入jquery-1.11.2.min.js和自己封裝的動省市區的方法
第三步:寫封裝方法用JS
第四步:做個純php處理頁面,這個頁面處理傳過來的任何代號

首先我們要建立數據庫:

這就是包含省,市,縣的數據庫。

下面我們就寫主頁面:sanji.php:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="jquery-1.11.2.min.js"></script>
  <script src="sanjiliandong.js"></script>
</head>
<body>
  <div id="sanjiliandong">
    <!--在這裡使用三級聯動插件-->
  </div>
</body>
</html>

然後就是js文件:

// Javascript Document
$(document).ready(function(e){
  //向div裡面仍三個下拉
   var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
  $("#sanjiliandong").html(str);//三個下拉顯示
       
   
  //當省選中的話市也會跟著變去也會變。市和區都會加載一遍
  FillSheng();//省
  FillShi();//市
  FillQu();//區
  //給省加點擊事件
  $("#sheng").change(function(){
      FillShi();//市
      FillQu();//區
    })
  //給市加點擊事件
  $("#shi").change(function(){
      FillQu();//區
    })
});
//做三個方法分別為省市區
//填充省的方法,如何在表裡查詢 出省的代號例如:北京0001、天津0001,中國下面所有省都是0001開頭的
function FillSheng()
{
  var pcode = "0001";
  $.ajax({
    async:false,
    url:"chuli.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"TEXT",
    success: function(data){
      //返回數據,根據行於行之間的分隔符來拆,拆完之後會返回一數組/行的數組
      var hang = data.split("|");
      
      var str = "<option value='' >請選擇地區</option>";
      //把行的數組遍歷下用for循環...length長度
      for(var i=0;i<hang.length;i++)
      {
        //把行的索引i在拆下.列與列的分隔符再拆
        var lie = hang[i].split("^");//這是列的數組
        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
        
        $("#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){
      //返回數據,根據行於行之間的分隔符來拆,拆完之後會返回一數組/行的數組
      var hang = data.split("|");
      
      var str = "<option value='' >請選擇城市</option>";
      //把行的數組遍歷下用for循環...length長度
      for(var i=0;i<hang.length;i++)
      {
        //把行的索引i在拆下.列與列的分隔符再拆
        var lie = hang[i].split("^");//這是列的數組
        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
      }
      $("#shi").html(str);
    }
  });
}
//填充區的方法
function FillQu()
{
  var pcode = $("#shi").val();
  $.ajax({
    async:false,
    url:"chuli.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"TEXT",
    success: function(data){
      //返回數據,根據行於行之間的分隔符來拆,拆完之後會返回一數組/行的數組
      var hang = data.split("|");
      
      var str = "<option value='' >請選擇鄉縣</option>";
      //把行的數組遍歷下用for循環...length長度
      for(var i=0;i<hang.length;i++)
      {
        //把行的索引i在拆下.列與列的分隔符再拆
        var lie = hang[i].split("^");//這是列的數組
        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
        
        $("#qu").html(str);
      }
    }
  });
}

之後是查詢數據庫的處理文件:

<?php
 //處理頁面只有一個功能處理傳過來的所有代號(省、市、區。。。)
 include("DBDA.class.php");
 $db = new DBDA();
 $pcode = $_POST["pcode"];//取到賦值代號
 $sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

顯示效果如下:

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved