页面省市的二级联动

<?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);
    }

}
时间: 2024-10-27 03:23:16

页面省市的二级联动的相关文章

全国省市车牌二级联动json数据

[ { "code": "冀A", "city": "石家庄", "province": "河北", "Pcode": "HB" }, { "code": "冀B", "city": "唐山", "province": "河北",

中国省市 Json 二级联动

Json数据: var cities = {'北京': ['北京'], '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'], '上海': ['黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '宝山区', '闵行

jsp+ajax+serverlet实现省市二级联动

jsp界面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

JS实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF

JavaScript省市二级联动

cities.xml <?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通

原生js :省市二级联动

在网上把了半天像二级联动, 多是:依赖于其他框架数据修改... 于是就有了下面自写的二级联动(原生JS,面向对象,数据可订制修改不局限于省市) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>二级联动</title> </head> <body> <

省市二级联动--使用app-jquery-cityselect.js插件

只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label> <p>从:</p> <div class="input-group"> <input id="areaIdFrom" name="areaIdFrom" type="hidden"

android:省市二级联动下拉框

全国省市xml文件下载 xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_par