ThinkPHP利用Ajax实现省市县地区三级联动_thinkphp快速简单实现ajax地区三级联动(很详细)-CSDN博客

本文链接：https://blog.csdn.net/Lin_kming/article/details/71733030

通过Ajax实现简单的三级联动

前台代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>ThinkPHP利用Ajax实现省市县地区三级联动</title>
 	<script src="__PUBLIC__/js/jquery-1.7.2.js"></script> <!-- //这里要引入一个jquery文件，__PUBLIC__指的路径是根目录的public文件夹 -->
 	</style>
 	<script type="text/javascript">
 		$(function(){
 			$("#pro").change(function(){     //选中id为‘pro’的select，‘change’创建改变事件
	 			//alert($(this).val());    // 弹出窗口，$(this).val()为当前选中的option的value值
	 			$.ajax({
	 				type:"post",    // 数据的提交方式：get和post  
	 				//url:"{:U('Index/Index')}",  
	 				url:"{:U('Users/inspect')}",
	 				// 数据的提交路径，U方法获取Index模块的Index的操作地址，而使用U方法前要加“：”，因为这是模板语法，表明要调用函数
	 				data:'pro_id='+$('#pro').val(),
	 				// 需要提交的数据，将需要提交的数据‘$('#pro').val()’赋给‘pro_id’，以post形式提交。这里‘+’在js、css中表示连接，$('#pro').val()是id为pro的当前选中的option的value值
	 				dataType:"json",  // 从后台服务器返回的数据的类型
	 				success:function(data){  // 成功后的回调函数，此时data为后台处理完传输过来的数据
	 					$('#city').html(data);  
	 					// 将当前页面‘id’为‘city’的元素的 innerHTML 设为‘data’。
	 					// 注：innerHTML是一个字符串，用来设置或获取元素起始和结束标签内的HTML内容。（获取HTML当前标签的起始和结束里面的内容）
	 				}
	 			})
	 		})
	 		$("#city").change(function(){
	 			//alert($(this).val());
	 			$.ajax({
	 				type:"post",
	 				url:"{:U('Index/Index')}",
	 				data:'pro_id='+$('#city').val(),
	 				dataType:"json",
	 				success:function(data){
	 					$('#area').html(data);
	 				}
	 			})
	 		})
 		})
 		
 	</script>
 </head>
 <body>
 	<!-- 省份 -->
 	<select name="pro" id="pro" class="sel">
 		<option>请选择省</option>
 		<foreach name="area" item="vo">
 			<option value="{$vo.area_id}">{$vo.area_name}</option>
 		</foreach>
 	</select>
 	<!-- 市区 -->
 	<select name="city" id="city" class="sel">
 		<option>请选择市区</option>
 	</select>
 	<!-- 县区 -->
 	<select name="area" id="area" class="sel">
 		<option>请选择县区</option>
 	</select>
 </body>
 </html>

后台代码：

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){  // 定义一个公共函数
    	if (IS_POST) {    // 判断是否有获取到POST传过来的数据
            $pid=I('post.pro_id');  //I方法获取前台通过POST传过来的'pro_id'值
            $m=M('Areas');  // 实例化一个模型
    		$condition['parent_id']=$pid; // 条件
            $res=$m->where($condition)->select(); // 查询实例化的模型中符合条件的数据，并以数组形式赋值给$res
            $opt='<option>请选择市区</option>'; // 声明一个变量并赋值
            foreach ($res as $key => $val) {  // foreach 每次循环将当前键名赋给 $key，键值赋给 $val 并且数组内部的指针向下移一次，以备下次循环赋值
                $opt .= "<option value='{$val['area_id']}'>{$val['area_name']}</option>"; 
                // '.='的作用是连续赋值，即累加。将每次循环得到的结果依次赋给变量
            }
            echo json_encode($opt); // json_encode()对变量进行 JSON 编码,并返回给前台（前台设置的数据格式为JSON）
    	}else{
    		$m=M('Areas');
    		$condition['parent_id']=1;
    		$res=$m->where($condition)->select();
    		$this->assign('area',$res); // 将变量的值赋给'area'（前台变量）并在前台输出
    		$this->display();
    	}   	
    }
}

?>