利用jquery和ajax實現省市區的三級聯動
分享一段4年前的代碼，偶然間看到了，不嫌棄的可以拿走，哈哈~~~
思路：首先獲取默認的省數據，然后根據省的變動獲取對應的市數據，最后再根據市的變動來獲取對應的區數據
1、jquery代碼
1 <script type="text/javascript">
2 //這是jquery的一般寫法
3 //$(document).ready(function(){
4 // alert();
5 //})
6 /////////////////////////////
7 //這是jquery的簡寫寫法
8 $(function(){ 9 //根據不同省來獲得不同的市
10 $("#sheng").change(function(){ 11 //獲得省的編號
12 var shengId=$("#sheng").val(); 13 //利用ajax實現根據省獲得城市的操作
14 $.ajax({ 15 type:"get", 16 //url:"getShiBySheng.php",
17 url:"?action=getShiBySheng", 18 data:{shengId:shengId}, 19 success:function(results){ 20 //利用jquery的函數對於json進行解析
21 var shis=eval(results); 22 //獲得城市的下拉列表
23 var shi=$("#shi"); 24 //清空城市下拉列表
25 shi.empty(); 26 //如果要做三級聯動，此時必須再加上清空區縣下拉列表
27 $("#qu").empty(); 28 //驗證ajax是否起作用，可以輸出shis.length
29 //alert(shis.length);
30 //遍歷數組，活動具體的城市信息
31 for(var i=0;i<shis.length;i++){ 32 var city=shis[i]; 33 //通過遍歷city.city_id
34 //alert(city.city_id);
35 //動態加載城市下拉列表框
36 $("<option>").val(city.shi_id).text(city.shi_name).appendTo(shi); 37 } 38 //alert($("#shi").val());
39 //根據省遍歷出市的時候，接着默認顯示區
40 var shiId=$("#shi").val(); 41 $.ajax({ 42 type:"get", 43 url:"?action=getQuByShi", 44 data:{shiId:shiId}, 45 success:function(results){ 46 var qus=eval(results); 47 var qu=$("#qu"); 48 qu.empty(); 49 for(var i=0;i<qus.length;i++){ 50 var qu1=qus[i]; 51 $("<option>").val(qu1.qu_id).text(qu1.qu_name).appendTo(qu); 52 } 53 } 54 }); 55 } 56 }); 57 }); 58 //////////////////////////////////////////////////////////
59 //同理可得，根據不同市來獲得不同的區
60 $("#shi").change(function(){ 61 var shiId=$("#shi").val(); 62 $.ajax({ 63 type:"get", 64 //url:"getQuByShi.php",
65 url:"?action=getQuByShi", 66 data:{shiId:shiId}, 67 success:function(results){ 68 var qus=eval(results); 69 var qu=$("#qu"); 70 qu.empty(); 71 for(var i=0;i<qus.length;i++){ 72 var qu1=qus[i]; 73 $("<option>").val(qu1.qu_id).text(qu1.qu_name).appendTo(qu); 74 } 75 } 76 }); 77 }); 78 }) 79 </script>
2、html頁面
1 <center>
2 <h3>利用jquery和ajax實現省市區的三級聯動</h3>
3 省：<select id="sheng">
4 <option>--請選擇省--</option>
5 <?php 6 //遍歷數組動態添加option 7 foreach ($shengs as $sheng) { 8 echo "<option value='".$sheng[sheng_id]."'>".$sheng[sheng_name]."</option>"; 9 } 10 ?>
11 </select>
12 市：<select id="shi">
13 <option>--請先選擇省--</option>
14 </select>
15 區：<select id="qu">
16 <option>--請先選擇省--</option>
17 </select>
18 </center>
3、php代碼
1 require '../model/UsersModel.class.php'; 2 class UsersController extends BaseController{ 3 private $userModel; 4 //對userModel進行賦值
5 public function __construct() { 6 $this->userModel=new UserModel(); 7 parent::__construct(); 8 } 9 //默認主頁
10 public function index(){ 11 $shengs=$this->userModel->getAllShengs(); 12 include '../view/SanJiLianDong.php'; 13 } 14 //根據省來顯示市
15 public function getShiBySheng(){ 16 $shengId=$_GET['shengId']; 17 $shis= $this->userModel->getShiBySheng($shengId); 18 //返回編碼后的城市數組,將php的數組轉換成json返回
19 echo json_encode($shis); 20 } 21 public function getQuByShi(){ 22 $shiId=$_GET['shiId']; 23 $qus= $this->userModel->getQuByShi($shiId); 24 //返回編碼后的城市數組,將php的數組轉換成json返回
25 echo json_encode($qus); 26 } 27 } 28
29 $UsersController = new UsersController(); 30 $action= empty($_GET['action'])?"index":$_GET['action']; 31 $UsersController->$action();