• 三级联动


    效果图:



    一、list.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>   
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>list_tzq</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="list.js"></script>
    </head>
    <body>
    	<select id="province" name="province">
    		<option value="">请选择省</option>
    	</select>
    	<select id="city" name="city">
    		<option value="">请选择市</option>
    	</select>
    	<select id="county" name="county">
    		<option value="">请选择县</option>
    	</select>
    </body>
    </html>

    二、list.js

    $(function(){
    	
    	$provinceSelect=$("#province");
    	$citySelect=$("#city");
    	$countySelect=$("#county");
    	
    	//显示第一级
    	
    	$.post("../ProvinceServlet",function(jsonArray){
    			showProvinces(jsonArray);
    	},"json");
    	
    	
    	//显示第二级。给第一级的下拉选项加入单击响应事件
    	$provinceSelect.change(function(){
    		//每次请求都须要将city下拉列表清空。不然会累加
    		//删除city的下拉<option>, 但第一个除外
    		$citySelect.find("option:not(:first)").remove();
    		//删除county的下拉<option>, 但第一个除外
    		$countySelect.find("option:not(:first)").remove();
    		
    	var pid=this.value;
    	if(pid=="") return ;
    	
    	$.post("../CityServlet",{pid:pid},function(jsonArray){
    		showCitys(jsonArray);	
    	},"json");
    		
    		
    		
    	});
    	
    	//显示第三级,给第二级的下拉选项加入单击响应事件
    	$citySelect.change(function(){
    		var cid=this.value;
    		$.post("../CountyServlet",{cid:cid},function(jsonArray){
    			showCountys(jsonArray);	
    		},"json");
    		
    	});
    	
    
    	
    	//显示省份
    	function showProvinces(jsonArray){
    		$.each(jsonArray,function(){
    			var pid=this.pid;
    			var pname=this.pname;
    			$provinceSelect.append('<option value="'+pid+'">'+pname+'</option>');
    		
    		});
    	}
    	
    	//显示市
    	function showCitys(jsonArray){
    		$.each(jsonArray,function(){
    			var cid=this.cid;
    			var cname=this.cname;
    			$citySelect.append('<option value="'+cid+'">'+cname+'</option>');
    			
    		});
    	}
    	
    	//显示县
    	function showCountys(jsonArray){
    		$.each(jsonArray,function(){
    			var tid=this.tid;
    			var tname=this.tname;
    			$countySelect.append('<option value="'+tid+'">'+tname+'</option>');
    
    		});
    	}
    		
    });



    三、servlet

    public class ProvinceServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	private ProvinceDao dao=new ProvinceDao();
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		List<Province> list = dao.getAll();
    		
    		String json=new Gson().toJson(list);
    		System.out.println(json);
    		
    		response.setContentType("text/json;charset=utf-8");
    		response.getWriter().write(json);
    		
    	}
    
    }
    
    public class CityServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	private CityDao cityDao=new CityDao();
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    		String pid = request.getParameter("pid");
    		
    		List<City> list = cityDao.getListByPid(pid);
    		
    		String json=new Gson().toJson(list);
    		System.out.println(json);
    		
    		response.setContentType("text/json;charset=utf-8");
    		response.getWriter().write(json);
    	}
    
    }

    public class CountyServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	private CountyDao countyDao=new CountyDao();
    	
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		System.out.println("11111111");
    		String cid = request.getParameter("cid");
    		System.out.println(cid);
    		
    		List<County> list = countyDao.getListByCid(cid);
    		String json=new Gson().toJson(list);
    		System.out.println(json);
    		
    		response.setContentType("text/json;charset=utf-8");
    		response.getWriter().write(json);
    	}
    
    }


    四、dao和bean略


  • 相关阅读:
    JavaScript 基础第七天(DOM的开始)
    JavaScript 基础第六天
    JavaScript 基础第五天
    JavaScript 基础第四天
    JavaScript 基础第三天
    JavaScript 基础第二天
    观《幸福终点站》有感
    山东移动2014校园招聘笔试
    Genymotion虚拟Android不能联网的一种解决方法
    关于Thinkpad E420双显卡驱动安装和切换的问题
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6913909.html
Copyright © 2020-2023  润新知