基于jq和springMvc方式的二级联动

结构
记得导包

applicationContext-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xsi:schemaLocation="
 http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context.xsd
 http://www.springframework.org/schema/mvc
 http://www.springframework.org/schema/mvc/spring-mvc.xsd
 " >
  
	<!-- 扫描包 -->
	<context:component-scan base-package="cn.itsource" />
	<!--支持SpringMVC特有的注解 -->
	<mvc:annotation-driven />
	<!-- 对静态资源放行 -->
	<mvc:default-servlet-handler />
	<!-- 视图解析器：自动为咱们添加前缀与后缀 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/" />
		<property name="suffix" value=".jsp" />
	</bean>
	<!-- 上传解析器 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize">
			<value>2000000000</value>
		</property>
	  </bean>
	  
</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	id="WebApp_ID" version="3.1">

	<!-- 	核心控制器 -->
	<servlet>
		<servlet-name>dispatcher</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<!-- SpringMVC的配置文件的位置 -->
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:applicationContext-mvc.xml</param-value>
		</init-param>
		<!--记SpringMVC跟着服务器(tomcat)的启动而启动 -->
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>dispatcher</servlet-name>
		<!--使用杠更加符合咱们的RESTful风格 -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>

	<!-- 配置相应的过滤器:角色SpringMVC 的POST请求的乱码问题 -->
	<!-- 配置编码方式过滤器,注意一点:要配置在所有过滤器的前面 -->
	 <filter>
	   <filter-name>CharacterEncodingFilter</filter-name>
	   <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
	   <init-param>
	     <param-name>encoding</param-name>
	     <param-value>utf-8</param-value>
	   </init-param>
	 </filter>
	 <filter-mapping>
	   <filter-name>CharacterEncodingFilter</filter-name>
	   <url-pattern>/*</url-pattern>
	 </filter-mapping>

</web-app>

City.java

public class City {
	private long id;
	private String name;

	public long getId() {
		return id;
	}

	public String getName() {
		return name;
	}

	public void setId(long id) {
		this.id = id;
	}

	public void setName(String name) {
		this.name = name;
	}

	public City(long id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

public static List<City> getCitys(Long id){
	List<City>list=new ArrayList<>();
	if(id==1){
		list=Arrays.asList(
				new City(1L,"渝中"),
				new City(2L,"渝北"),
				new City(3L,"南岸"),
				new City(3L,"九龙坡")
				);
	}else if(id==2){
		list=Arrays.asList(
				new City(1L,"青阳"),
				new City(2L,"郫县"),
				new City(3L,"犀浦")
				);
	}else{
		list=Arrays.asList(
				new City(1L,"南通"),
				new City(2L,"中通"),
				new City(3L,"北通")
				);
	}
	return list;
		
	}
}

Province.java

public class Province {
private long id;
private String name;
public long getId() {
	return id;
}
public String getName() {
	return name;
}
public void setId(long id) {
	this.id = id;
}
public void setName(String name) {
	this.name = name;
}
public Province(long id, String name) {
	super();
	this.id = id;
	this.name = name;
}

public static List<Province> getProvince(){
	List<Province>list = new ArrayList<>();
	list.add(new Province(1L,"重庆"));
	list.add(new Province(2L,"成都"));
	list.add(new Province(3L,"北京"));
	return list;
	
	}
}

ListController.java

@Controller
public class ListController {
	@RequestMapping("/ListProvince")
	@ResponseBody // 这个注解可以返回Json类型的数据
	public List<Province> getListProvince() {
		return Province.getProvince();
	}

	@RequestMapping("/ListCity")
	@ResponseBody
	public List<City> getListCity(long id) {
		return City.getCitys(id);
	}
}

jsonTwo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery/jquery-1.11.2.min.js"></script>
<script>
	$(function(){
		$.get("/ListProvince",function(result){
			for(var i=0;i<result.length;i++){
				var pro=result[i];
				$("#province").append("<option value='"+pro.id+"'>"+pro.name+"</option>")
			}
		})
		
		$("#province").on("change",function(){
			var provinceId=$(this).val();
			if(provinceId==-1){
				$("#city").html("<option>?</option>");
				return
			}
			$("#city").html("<option>?</option>")
			$.post("/ListCity",{id:provinceId},function(result){
				for(var i=0;i<result.length;i++){
					var city=result[i];
					$("#city").append("<option value='"+city.id+"'>"+city.name+"</option>");
				}
			})
		})
	})
</script>
</head>
<body>
<select id="province">
<option value="-1">?</option>
</select>

<select id="city">
<option value="-1">?</option>
</select>

</body>
</html>