页面省市的二级联动 

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.js"></script>
<title>Insert title here</title>
</head>
<body style="font-size: 12px">

    <select id="province">
        <option value="">请选择</option>
    </select>
    <select id="city">
        <option value="">请选择</option>
    </select>
    <select id="county">
        <option value="">请选择</option>
    </select><br/>
    详细地址：<input type="text"/>
    <script type="text/javascript">
        $().ready(function(){
            //文档加载完毕后，异步请求所有的省份
            $.post("${pageContext.request.contextPath}/servlet/ControllerServlet?operation=showAllProvince&time="+new Date().getTime(),null,function(data,textStatus){
                //返回的数据时JSON字符串
                var provinces = eval("("+data+")");
                //id=province增加<option value="1">山东省</option>
                for(var i=0;i<provinces.length;i++){
                    var id = provinces[i].id;
                    var name = provinces[i].name;
                    
                    var $optionElement = $("<option value='"+id+"'>"+name+"</option>");
                    $("#province").append($optionElement);
                }
            });
            
            //省份值变化时，引起城市的变化
            $("#province").change(function(){
                //清空城市
                $("#city option[value!='']").remove();
                $("#county option[value!='']").remove();
                $.post("${pageContext.request.contextPath}/servlet/ControllerServlet?operation=showCityByProvince&time="+new Date().getTime(),{pid:$(this).val()},function(data,textStatus){
                    var citys = eval("("+data+")");
                    for(var i=0;i<citys.length;i++){
                        var id = citys[i].id;
                        var name = citys[i].name;
                        
                        var $optionElement = $("<option value='"+id+"'>"+name+"</option>");
                        $("#city").append($optionElement);
                    }
                });
            });
            

            //城市值变化时，引起区县的变化
            $("#city").change(function(){
                //清空区县
                $("#county option[value!='']").remove();
                
                $.post("${pageContext.request.contextPath}/servlet/ControllerServlet?operation=showCountyByCity&time="+new Date().getTime(),{cid:$(this).val()},function(data,textStatus){
                    var countys = eval("("+data+")");
                    for(var i=0;i<countys.length;i++){
                        var id = countys[i].id;
                        var name = countys[i].name;
                        
                        var $optionElement = $("<option value='"+id+"'>"+name+"</option>");
                        $("#county").append($optionElement);
                    }
                });
            });
        });
    </script>
</body>
</html>

 

 

public class ControllerServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private BusinessService s = new BusinessServiceImpl();
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String operation = request.getParameter("operation");
        if("showAllProvince".equals(operation)){
            showAllProvince(request,response);
        }
        if("showCityByProvince".equals(operation)){
            showCityByProvince(request,response);
        }
        if("showCountyByCity".equals(operation)){
            showCountyByCity(request,response);
        }
    }
    //根据城市的id罗列区县
        private void showCountyByCity(HttpServletRequest request,
                HttpServletResponse response)throws ServletException, IOException {
            String cid = request.getParameter("cid");
            if(cid!=null&&!cid.equals("")){
                List<County> cs = s.findCountyByCityId(Integer.parseInt(cid));
                JSONArray jsonArray = JSONArray.fromObject(cs);
                PrintWriter out = response.getWriter();
                out.write(jsonArray.toString());
            }
            
        }
    //根据省份的id罗列城市
    private void showCityByProvince(HttpServletRequest request,
            HttpServletResponse response)throws ServletException, IOException {
        String pid = request.getParameter("pid");
        if(pid!=null&&!pid.equals("")){
            List<City> cs = s.findCityByProvinceId(Integer.parseInt(pid));
            JSONArray jsonArray = JSONArray.fromObject(cs);
            PrintWriter out = response.getWriter();
            out.write(jsonArray.toString());
        }
        
    }
    //显示所有的省份
    private void showAllProvince(HttpServletRequest request,
            HttpServletResponse response)  throws ServletException, IOException {
        List<Province> ps = s.findAllProvince();
        JSONArray jsonArray = JSONArray.fromObject(ps);
        PrintWriter out = response.getWriter();
        out.write(jsonArray.toString());
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

 

posted @ 2016-07-16 08:18  沙漠里的小鱼  阅读(418)  评论(0)    收藏  举报