JQuery+Ajax实现省市二级联动

学习必看:javacto.taobao.com

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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function checkAAA(id) {

                $.ajax({
                    type : "POST",
                    url : "${pageContext.request.contextPath}/servlet/BedServlet?method=findById",
                    data : "id=" + id,
                    success : function(data) {
                        var jsonStr = JSON.parse(data);
                        for ( var i in jsonStr) {
                            /*  alert(jsonStr[i].id);
                             alert(jsonStr[i].name); */
                            $("#floor").append(
                                    "<option value='"+jsonStr[i].id+"'>"
                                            + jsonStr[i].name + "</option>");
                        }
                    }
                });
    }
</script>
</head>
<body>

    <form action="${pageContext.request.contextPath}/" method="post">
        <table class="table table-condensed">
            <tr class="form-group">
                <td>所在大楼:</td>
                <td><select class="form-control" onblur="checkAAA(this.value);">
                        <option value="1">天子楼</option>
                        <option value="2">黄鹤楼</option>
                        <option value="3">关西楼</option>
                        <option value="4">岳阳楼</option>
                </select></td>
                <td>所在楼层:</td>
                <td><select name="floor" id="floor">
                        <!-- 动态生成二级菜单数据 -->
                </select></td>
            </tr>
        </table>
    </form>

</body>
</html>

JAVA代码:

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        String methodName = req.getParameter("method");
        String id = req.getParameter("id");
        List<BedC> bedCs= new ArrayList<BedC>();// 此处应该通过id查询对应数据
        BedC bedC1 = new BedC(1, "FL011");
        BedC bedC2 = new BedC(2, "FL012");
        BedC bedC3 = new BedC(3, "FL013");
        BedC bedC4 = new BedC(4, "FL014");
        BedC bedC5 = new BedC(5, "FL015");
        bedCs.add(bedC1);
        bedCs.add(bedC2);
        bedCs.add(bedC3);
        bedCs.add(bedC4);
        bedCs.add(bedC5);
            
        //把List集合数据转为JSON格式,需要包找我javacto.taobao.com
        JSONArray listToJson = JSONArray.fromObject(bedCs);
        out.print(listToJson);
    }

学习必看:javacto.taobao.com

猜你喜欢

转载自blog.csdn.net/zengzhaowu313/article/details/85933051