利用jquery和ajax实现省市区的三级联动

利用jquery和ajax实现省市区的三级联动

分享一段4年前的代码，偶然间看到了，不嫌弃的可以拿走，哈哈~~~

思路：首先获取默认的省数据，然后根据省的变动获取对应的市数据，最后再根据市的变动来获取对应的区数据

1、jquery代码

<script type="text/javascript">
    //这是jquery的一般写法
    //$(document).ready(function(){
    //    alert();
    //})
    /////////////////////////////
    //这是jquery的简写写法
    $(function(){
        //根据不同省来获得不同的市
        $("#sheng").change(function(){
            //获得省的编号
            var shengId=$("#sheng").val();
            //利用ajax实现根据省获得城市的操作
            $.ajax({
                type:"get",
                //url:"getShiBySheng.php",
                url:"?action=getShiBySheng",
                data:{shengId:shengId},
                success:function(results){
                    //利用jquery的函数对于json进行解析
                    var shis=eval(results);
                    //获得城市的下拉列表
                    var shi=$("#shi");
                    //清空城市下拉列表
                    shi.empty();
                    //如果要做三级联动，此时必须再加上清空区县下拉列表
                    $("#qu").empty();
                    //验证ajax是否起作用，可以输出shis.length
                    //alert(shis.length);
                    //遍历数组，活动具体的城市信息
                    for(var i=0;i<shis.length;i++){
                        var city=shis[i];
                        //通过遍历city.city_id
                        //alert(city.city_id);
                        //动态加载城市下拉列表框
                        $("<option>").val(city.shi_id).text(city.shi_name).appendTo(shi);
                    }
                    //alert($("#shi").val());
                    //根据省遍历出市的时候，接着默认显示区
                    var shiId=$("#shi").val();
                    $.ajax({
                        type:"get",
                        url:"?action=getQuByShi",
                        data:{shiId:shiId},
                        success:function(results){
                            var qus=eval(results);
                            var qu=$("#qu");
                            qu.empty();
                            for(var i=0;i<qus.length;i++){
                                var qu1=qus[i];
                                $("<option>").val(qu1.qu_id).text(qu1.qu_name).appendTo(qu);
                            }
                        }
                    }); 
                }
            }); 
        });
        //////////////////////////////////////////////////////////
        //同理可得，根据不同市来获得不同的区
        $("#shi").change(function(){
            var shiId=$("#shi").val();
            $.ajax({
                type:"get",
                //url:"getQuByShi.php",
                url:"?action=getQuByShi",
                data:{shiId:shiId},
                success:function(results){
                    var qus=eval(results);
                    var qu=$("#qu");
                    qu.empty();
                    for(var i=0;i<qus.length;i++){
                        var qu1=qus[i];
                        $("<option>").val(qu1.qu_id).text(qu1.qu_name).appendTo(qu);
                    }
                }
            }); 
        });
    })
</script>

2、html页面

<center>
    <h3>利用jquery和ajax实现省市区的三级联动</h3>
    省：<select id="sheng">
        <option>--请选择省--</option>
        <?php
            //遍历数组动态添加option
            foreach ($shengs as $sheng) {
                echo "<option value='".$sheng[sheng_id]."'>".$sheng[sheng_name]."</option>";
            }
        ?>
    </select>
    市：<select id="shi">
        <option>--请先选择省--</option>
    </select>
    区：<select id="qu">
        <option>--请先选择省--</option>
    </select>
</center>

3、php代码

require '../model/UsersModel.class.php';
 class UsersController extends BaseController{
     private $userModel;
     //对userModel进行赋值
     public  function __construct() {
         $this->userModel=new UserModel();
         parent::__construct();
     }
     //默认主页
     public function index(){
         $shengs=$this->userModel->getAllShengs();
         include '../view/SanJiLianDong.php';
     }
     //根据省来显示市
     public function getShiBySheng(){
        $shengId=$_GET['shengId'];
        $shis=  $this->userModel->getShiBySheng($shengId);
        //返回编码后的城市数组,将php的数组转换成json返回
        echo json_encode($shis);
     }
     public function getQuByShi(){
        $shiId=$_GET['shiId'];
        $qus=  $this->userModel->getQuByShi($shiId);
        //返回编码后的城市数组,将php的数组转换成json返回
        echo json_encode($qus);
     }
 }
 
 $UsersController = new UsersController();
 $action=  empty($_GET['action'])?"index":$_GET['action'];
 $UsersController->$action();