tp3实现省市区三级联动

最新推荐文章于 2025-06-02 21:46:57 发布

lmp5023

最新推荐文章于 2025-06-02 21:46:57 发布

阅读量627

点赞数

分类专栏： thinkphp

thinkphp 专栏收录该内容

123 篇文章

订阅专栏

博客提供了HTML和PHP的核心代码以及数据库文件，用户可通过链接http://pan.baidu.com/s/1kU2RDTP进行下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- <script type="text/javascript" src="__ROOT__/Public/js/jquery-1.js"></script> -->
<!-- <script type="text/javascript" src="__ROOT__/Public/js/jquery-2.1.4.min.js"></script> -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

<body>
<div>
	<label>所在地点</label>
	<select name="province_id" id="province_id" style="width:150px;">
		<option>请选择</option>
        <volist name="province_list" id="province">
        	<option  value="{$province.region_id}">{$province.region_name}</option>
        </volist>                                                  
     </select>
	 <select name="city_id"  id="city_id" style="width:150px;" >
		 <option>请选择</option>
		 <volist name="city_list" id="city">
		 	<option value="{$city.region_id}" selected="selected">{$city.region_name}</option>
		 </volist>                                                  
	  </select>
	  <select name="district_id"  id="district_id" style="width:150px;" >
		  <option value="0">请选择</option>
		  <volist name="dis_list" id="dis">
		   <option value="{$dis.region_id}" selected="selected">{$dis.region_name}</option>
		  </volist>                                              
	   </select>  
</div>
<script>
	$("#province_id").change(function(){
	var province_id=$(this).val();
	$.ajax({
		url:'Home/Index/get_citys',
		Type:"POST",
		data:"province_id="+province_id,
		dataType:"json",
		success:function(data){
			var city = data.city;
			var option=$("<option></option>");
			$(option).val("0");
			$(option).html("请选择");
			var option1=$("<option></option>");
			$(option1).val("0");
			$(option1).html("请选择");
			$("#city_id").html(option);
			$("#district_id").html(option1);
			for(var i in city){
				var option=$("<option></option>");
				$(option).val(city[i]['region_id']);
				$(option).html(city[i]['region_name']);
				$("#city_id").append(option);
			}
		}
		
	});
});
</script>
<script>
$("#city_id").change(function(){
	var city_id=$(this).val();
	$.ajax({
		url:'Home/Index/get_district',
		Type:"POST",
		data:"city_id="+city_id,
		dataType:"json",
		success:function(data){
			var district = data.district;
			var option=$("<option></option>");
			$(option).val("0");
			$(option).html("请选择");
			$("#district_id").html(option);
			for(var i in district){
				var option=$("<option></option>");
				$(option).val(district[i]['region_id']);
				$(option).html(district[i]['region_name']);
				$("#district_id").append(option);
			}
		}
	});
});
</script>
</body>
</html>

php:

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
	//获取省和直辖市
    public function index(){
		$listObj = M('region');
		$whereprovince['top_parentid'] = 0;
		$listprovince = $listObj->where($whereprovince)->select();
		$this->assign("province_list",$listprovince);
		
        $this->display();
    }
	//获取地级市
	public function get_citys(){
		$listObj = M('region');
		$where['top_parentid'] = I('province_id');
		$where['level'] = 2;
		$list = $listObj->where($where)->select();
		$data=array('status'=>0,'city'=>$list);
		header("Content-type: application/json");
		exit(json_encode($data));
	}
	//获取地级县
	public function get_district(){
		$listObj = M('region');
		$where['parent_id'] = I('city_id');
		$where['level'] = 3;
		$list = $listObj->where($where)->select();
		$data=array('status'=>0,'district'=>$list);
		header("Content-type: application/json");
		exit(json_encode($data));
	}
}

下面是核心代码和数据库文件，需要的下载就可以了。

http://pan.baidu.com/s/1kU2RDTP