City three linkage Code

1. Create a city table execution mysql_city.sql

select * from city where pid=1;# 所有省
	select * from city where pid=10;# (10是河北省的id)河北省所有市
	select * from city where pid=144;# (144是廊坊市的id)廊坊市所有县

2. Create a project city

 lib导包fastjson-1.2.2.jar
	 mysql-connector-java-5.1.7-bin.jar
  js jquery-1.8.2.min.js

3.CityServlet (as well as City class, CityDao category)

//jdbc查询  
	String pid = request.getParameter("pid");
	Dao dao=new Dao();
	List<City> list=dao.select(pid);
	//list转成json
	String jsonString = JSON.toJSONString(list);
	response.getWriter().print(jsonString);
	//CityDao  String sql="select * from city where pid=?";


4. 创建index.jsp页面

   <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script></head>
  <script type="text/javascript">
	$(function(){
  		//省 页面刷新 就存在
  		$.ajax({//ajax查询所有省
  			type:"post",
  			url:"CityServlet",
  			data:{pid:1},
  			success:function(data){//data为json数组
				for(var i in data){//遍历数组追加到(省)下拉列表内
  					$("#sheng").append("<option value="+data[i].id+">"+data[i].cityname+"</option>");
  				}
  			},
  			dataType:"json",
  			async:false
  		});
  		
  		//省改变时 查询城市
  		$("#sheng").change(function(){
  			var id=$(this).val();//获取当前省的id
			//将市和县清空
  			$("#shi").empty();
  			$("#shi").append("<option >请选择</option>");
  			$("#xian").empty();
  			$("#xian").append("<option >请选择</option>");
			//ajax查询所有市
  			$.ajax({
  			type:"post",
  			url:"CityServlet",
  			data:{pid:id},
  			success:function(data){
				for(var i in data){//遍历数组追加到(市)下拉列表内
					$("#shi").append("<option value="+data[i].id+">"+data[i].cityname+"</option>");
				};
  			},
  			dataType:"json",
  			async:false
  		});
  		});
  		//市改变时 查询县
  		$("#shi").change(function(){
  			var id=$(this).val();//获取当前市的id
			//将县清空
  			$("#xian").empty();
  			$("#xian").append("<option >请选择</option>");
			//ajax查询所有市
  			$.ajax({
  			type:"post",
  			url:"CityServlet",
  			data:{pid:id},
  			success:function(data){//遍历数组追加到(县)下拉列表内
				for(var i in data){
					$("#xian").append("<option value="+data[i].id+">"+data[i].cityname+"</option>");
				};
  			},
  			dataType:"json",
  			async:false
  		});
  		});
  	});
  </script>
<body>
   <select id="sheng">
   	<option>请选择</option>	
   </select>省
    <select id="shi">
   	<option>请选择</option>
   </select>市
   <select id="xian">
   	<option>请选择</option>
   </select>县
</body>

City three linkage Code

Guess you like