省市区三级联动代码

最新推荐文章于 2024-01-19 23:44:06 发布

Good_Luck_Li

最新推荐文章于 2024-01-19 23:44:06 发布

阅读量1k

点赞数

文章标签：全国地区三级联动

本文链接：https://blog.csdn.net/Good_Luck_Li/article/details/89353326

版权

本文介绍了如何使用Java实现省市区三级联动的功能。涉及到jsp页面的设计、jQuery的使用以及controller、mapper层的代码编写，包括Area、City和Province实体类的定义。

摘要由CSDN通过智能技术生成

sql语句在上一篇文章中，需要的童鞋可以自行领取。
首先是jsp页面：

省：<select name="provinceid" onchange="findCity(this.value)">
		<option>---请选择---</option>
	</select>
	<span id="but1"></span><span id="but2"></span>

上面是jsp,剩下的是jquery，这个可以自己放到js中，建一个类似工具类的js，需要直接调用就Ok

$(function(){
	$.post(
		"findProvince",{},function(obj){
			for(var i in obj){
				$("[name='provinceid']").append("<option value="+obj[i].provinceid+">"+obj[i].province+"</option>");
			}
		},"json"
	);
})
function findCity(provinceid){
	$.post(
		"findCity",{father:provinceid},function(obj){
			$("#but1").empty();
			$("#but1").append("市：<select name='cityid' onchange='findArea(this.value)'></select>");
			for ( var i in obj) {
				$("[name='cityid']").append("<option value="+obj[i].cityid+">"+obj[i].city+"</option>");
			}
		},"json"	
	);
}
function findArea(father){
	$.post(
		"findArea",{father:father},function(obj){
			$("#but2").empty();
			$("#but2").append("区：<select name='areaid'></select>");
			for ( var i in obj) {
				$("[name='areaid']").append("<option value="+obj[i].areaid+">"+obj[i].area+"</option>");
			}
		},"json"	
	);
	
}