jQuery ajax實現省市縣三級聯動

2019-11-19 17:09:45

字體：大中小

來源：轉載

供稿：網友

下面我們用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);

顯示效果如下：