利用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();