ThinkPHP+AJAX三级联动

sanji.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <load href ="__PUBLIC__/JQ/jquery-1.12.4.min.js"/>
</head>
<body>

<h1>三级联动</h1>
<div id='sanji'>    
        <select id = 'sheng'></select>
        <select id ='shi'></select>
        <select id = 'xian'></select>
</div>
</body>
</html>
<script>

$(document).ready(function(e){



sheng();
shi();
xian();
    
    //省级列表数据
    function sheng(){
        
        $.ajax({
            
            url:"__CONTROLLER__/sheng",
            dataType:"json",    
            async:false,                        //同步
            success:function(sheng){
            
                var str ='';
            
                    for(var i=0;i<sheng.length;i++)
                {
                    str += "<option value = " + sheng[i].pro_id +">"
                            + sheng[i].pro_name + "</option>";
                }
                
                $("#sheng").html(str);        //填充省级列表
            }
        });
    }
    
    
    //市级列表数据
    function shi(){
    
        var id = $("#sheng").val();
        
            $.ajax({
            
                url:"__CONTROLLER__/shi",
                data:{id:id},
                dataType:"json",
                async:false,                    //同步
                type:"post",
                success:function(shi){
                    
                    var str = '';
                    
                        for(var i=0;i<shi.length;i++)
                    {
                        str += "<option value=" + shi[i].city_id +">"
                                + shi[i].city_name + "</option>";
                    }
                    
                    $("#shi").html(str);        //填充市级列表
                }
            });
    }
    
    
    function xian(){
    
        var id = $("#shi").val();
        
        $.ajax({
            
                url:"__CONTROLLER__/xian",
                data:{id:id},
                dataType:"json",
                async:false,                    //同步
                type:"post",
                success:function(xian){
                
                    var str = '';
                    
                        for(var i=0;i<xian.length;i++)
                    {
                        str += "<option value=" + xian[i].cou_id +">"
                        + xian[i].cou_name + "</option>";
                    }
                    
            
                    $("#xian").html(str);        //填充县级列表
            
                }
        });
    }
    
    
    $("#sheng").change(function(){
         
        shi();
        xian();
    });
    
    
    $("#shi").change(function(){
        
        xian();
    
    
    });
        
});

</script>

View Code

SanjiController.class.php

<?php
namespace HomeController;
use ThinkController;
class SanjiController extends Controller{
        
        public function sanji(){
            
            $this->display();
        }    
        
        //省级列表
        public function sheng(){
            
            $pro = M('pro');
            
            $sheng = $pro->select();
            
            $this->ajaxReturn($sheng);
            
        }
        
        //市级列表
        public function shi(){
            
            $id = I('id');
            
            $city = M('city');
            
            $shi = $city->where(array('pro_id'=>$id))->select();
            
            $this->ajaxReturn($shi);
    
        }
        
        public function xian(){
            
            $id = I('id');
            
            $cou = M('cou');
            
            $xian = $cou->where(array('city_id'=>$id))->select();
            
            $this->ajaxReturn($xian);
        }
        
}

?>

View Code

省级表　　　　　　　　市级表　　

县级表　　　

注：表中数据仅作为练习所用，请不要对号入座！