二级联动、三级联动

最新推荐文章于 2020-12-08 17:08:02 发布

爱钻研的贝勒爷

最新推荐文章于 2020-12-08 17:08:02 发布

阅读量1.1k

点赞数

分类专栏： ajax 文章标签： Java ajax mybatis spring mvc

本文链接：https://blog.csdn.net/yp18810420654/article/details/72986195

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在写项目的时候，很多时候都会用到二级联动和三级联动，今天给大家上传下代码。

下载地址： http://download.csdn.net/detail/yp18810420654/9852052

一、小功能是用SpringMVC mybatis 写的，配置文件复制之前的项目，可能有些无用的配置，不影响使用

二、功能包括二级联动（省市），三级联动（省市区）

三、文件中自带数据库，导入即可使用

四、数据库是mySQl的，使用时请把用户名和密码改成本机的

五、具体使用哪个jar包我没有找，把之前SpringMVC项目上用的jar包全部放在了WEB-INF lib文件夹下，全部导入项目即可运行

六、本项目是给那些刚接触Java，对ajax使用不熟练的人提供

PS：我使用ajax时间也不长，方法有很多，也许我这不是最好的，但是可以达到自己的目的。

实体类

public class Province {

	private int id;
	private String pname;
	
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getPname() {
		return pname;
	}
	public void setPname(String pname) {
		this.pname = pname;
	}
	
	
}


public class City {

	private int id;
	private String cname;
	private int provinceId;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
	public int getProvinceId() {
		return provinceId;
	}
	public void setProvinceId(int provinceId) {
		this.provinceId = provinceId;
	}
	
}


public class Area {
	
	private int id;
	private String aname;
	private int cityId;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getAname() {
		return aname;
	}
	public void setAname(String aname) {
		this.aname = aname;
	}
	public int getCityId() {
		return cityId;
	}
	public void setCityId(int cityId) {
		this.cityId = cityId;
	}
}

映射文件

<mapper namespace="com.mapper.CityMapper">

	<!-- 通过省份id查询Ciyt -->
	<select id="selectCityById"  resultType="com.entity.City">
		select * from city where provinceId = #{provinceId }
	</select>

</mapper>


<mapper namespace="com.mapper.ProvinceMapper">

	<!-- 查询所有省份信息 -->
	<select id="selAll" resultType="com.entity.Province">
		select * from province 
	</select>
	
	<!-- 通过省份id查询Ciyt -->
	<select id="selectCityById"  resultType="com.entity.City">
		select * from city where provinceId = #{proId}
	</select>

</mapper>


<mapper namespace="com.mapper.AreaMapper">

	<!-- 通过城市id查询area -->
	<select id="selectAreaById"  resultType="com.entity.Area">
		select * from area where cityId = #{cityId }
	</select>

</mapper>

控制层 controller

//显示所有部门
		@RequestMapping("/showPro.action")
		public String selAll(int save,WebRequest request){
			List<Province> proList = provinceservice.selAll();
			request.setAttribute("proList", proList,WebRequest.SCOPE_SESSION);
			if(save == 1){
				return "two.jsp";		
			}else{
				return "three.jsp";
			}
		}
		
		//选择省份出来城市
		@ResponseBody
		@RequestMapping(value="/selectCityById.action",produces = "text/html;charset=UTF-8")
		public String selectCityById(String proId,HttpServletRequest request){
			List<City> cityList = cityservice.selectCityById(Integer.valueOf(proId));
			Gson gson = new Gson();
			String json = gson.toJson(cityList);
			return json;
		}
		
		//选择城市出来区县
		@ResponseBody
		@RequestMapping(value="/selectAreaById.action",produces = "text/html;charset=UTF-8")
		public String selectAreaById(String cid,HttpServletRequest request){
			List<Area> areaList = areaservice.selectAreaById(Integer.valueOf(cid));
			Gson gson = new Gson();
			String json = gson.toJson(areaList);
			return json;
		}

二级联动 jsp页面

<script type="text/javascript">
//级联操作，选择省份出来市
function getCityListById(){
    var proId = $("#proId").val();
		$.ajax({
		   type: "post",
		   url: "selectCityById.action",
		   data: "proId=" + proId,
		   success: function(msg){
		   	 //存到文本域方便职位的级联操作
		  	 $("#list").val(msg);
		   	 var list = eval("("+msg+")");
		   	 var html = "";
		     for(var i = 0;i < list.length;i++){
		     	html += "<option value='"+list[i].id+"'>"+list[i].cname+"</option>";
		     }
		     $("#cid").html(html);
		   }
		});
}
</script>
</head>
<body>
	省份：
		<select name="pname" id="proId" οnchange="getCityListById();" >
			<option value="">--请选择--</option>
			<c:forEach items="${proList }" var="pro">
				<option value="${pro.id }">${pro.pname }</option>
			</c:forEach>
		</select>
	城市：
		<select name="cname" id="cid">
			<option value="">--请选择--</option>
		</select>
</body>

三级联动 jsp页面

<script type="text/javascript">
//级联操作，选择省份出来市
function getCityListById(){
   var proId = $("#proId").val();
	$.ajax({
	   type: "post",
	   url: "selectCityById.action",
	   data: "proId=" + proId,
	   success: function(msg){
	   	 //存到文本域方便职位的级联操作
	  	 $("#list").val(msg);
	   	 var list = eval("("+msg+")");
	   	 var html = "";
	     for(var i = 0;i < list.length;i++){
	     	html += "<option value='"+list[i].id+"'>"+list[i].cname+"</option>";
	     }
	     $("#cid").html(html);

		//选择完省份之后出现的默认市，出现默认的区县	     
	     var cid = $("#cid").val();
	     $.ajax({
	   	   type: "post",
		   url: "selectAreaById.action",
		   data: "cid=" + cid,
		   success: function(msg){
		   	 //存到文本域方便职位的级联操作
		  	 $("#list").val(msg);
		   	 var list = eval("("+msg+")");
		   	 var html = "";
		     for(var i = 0;i < list.length;i++){
		     	html += "<option value='"+list[i].id+"'>"+list[i].aname+"</option>";
		     }
		     $("#aid").html(html);
		   }
		  });
	   }
	});
}

//级联操作，选择城市出来对应的区县
function getAreaListById(){
    var cid = $("#cid").val();
		$.ajax({
		   type: "post",
		   url: "selectAreaById.action",
		   data: "cid=" + cid,
		   success: function(msg){
		   	 //存到文本域方便职位的级联操作
		  	 $("#list").val(msg);
		   	 var list = eval("("+msg+")");
		   	 var html = "";
		     for(var i = 0;i < list.length;i++){
		     	html += "<option value='"+list[i].id+"'>"+list[i].aname+"</option>";
		     }
		     $("#aid").html(html);
		   }
		});
}

</script>
</head>
<body>
	省份：
		<select name="pname" id="proId" οnchange="getCityListById();">
			<option value="">--请选择--</option>
			<c:forEach items="${proList }" var="pro">
				<option value="${pro.id }">${pro.pname }</option>
			</c:forEach>
		</select>
	城市：
		<select name="cname" id="cid" οnchange="getAreaListById();" >
			<option value="">--请选择--</option>
		</select>
	区县：
		<select name="aname" id="aid">
			<option value="">--请选择--</option>
		</select>
</body>

二级联动三级联动的代码 mapper层和 service 层没有上传，代码源自己下载就行，里面附带数据库

爱钻研的贝勒爷

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
二级联动、三级联动

在写项目的时候，很多时候都会用到二级联动和三级联动，今天给大家上传下代码。下载地址： http://download.csdn.net/detail/yp18810420654/9852052一、小功能是用SpringMVC mybatis 写的，配置文件复制之前的项目，可能有些无用的配置，不影响使用二、功能包括二级联动（省市），三级联动（省市区）
复制链接

扫一扫