example_ThinkPHP+AJAX三级联动

Posted 司会铭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了example_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 Home\\Controller;
use Think\\Controller;
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

省级表         市级表  

 

 

县级表   

 

注:表中数据仅作为练习所用,请不要对号入座!

以上是关于example_ThinkPHP+AJAX三级联动的主要内容,如果未能解决你的问题,请参考以下文章

Ajax三级联动

PHP ajax 实现三级联动

AJAX 三级联动例题

javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)

AJAX实现三级联动

多级联动系列——ajax调用XML实现三级联动