三级联动的代码，老师看下有没有需要改的地方

来源：3-8 实现二级联动菜单-2

mixiaofan

2019-11-26 10:34:15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                "url": "/ajax/channel",
                "data": {"level": "1"},
                "type": "get",
                "dataType": "json",
                "success": function (json) {
                    console.log(json);
                    for (var i = 0; i < json.length; i++) {
                        var ch = json[i];
                        $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>");

                    }
                }
            });
        });
        $(function () {
            $("#lv1").on("change", function () {
                var parent = $(this).val();
                console.log(parent);
                $.ajax({
                    "url": "/ajax/channel",
                    "data": {"level": "2", "parent": parent},
                    "type": "get",
                    "dataType": "json",
                    "success": function (json) {
                        console.log(json);
                        $("#lv2").html("<option selected='selected'>请选择</option>");
                        $("#lv3").html("<option selected='selected'>请选择</option>");
                        for (var i = 0; i < json.length; i++) {
                            var ch = json[i];
                            $("#lv2").append("<option value='" + ch.code + "'>" + ch.name + "</option>");
                        }
                    }
                });
            })
        });
        $(function () {
            $("#lv2").on("change", function () {
                var parent = $(this).val();
                console.log(parent);
                $.ajax({
                    "url": "/ajax/channel",
                    "data": {"level": "3", "three": parent},
                    "type": "get",
                    "dataType": "json",
                    "success": function (json) {
                        console.log(json);
                        $("#lv3").html("<option selected='selected'>请选择</option>");
                        for (var i = 0; i < json.length; i++) {
                            var ch = json[i];
                            $("#lv3").append("<option value='" + ch.code + "'>" + ch.name + "</option>");
                        }
                    }
                });
            })
        });

    </script>
</head>
<body>
<select id="lv1" style="width: 200px;height: 30px">
    <option selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px;height: 30px">
    <option selected="selected">请选择</option>
</select>
<select id="lv3" style="width: 200px;height: 30px">
    <option selected="selected">请选择</option>
</select>
</body>
</html>

package com.imooc.ajax;

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(urlPatterns = "/channel")
public class ChannelServlet extends HttpServlet {
    public ChannelServlet() {
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String level = request.getParameter("level");
        String parent = request.getParameter("parent");
        String three = request.getParameter("three");
        List chlist = new ArrayList();
        if (level.equals("1")) {
            chlist.add(new Channel("SX", "陕西省"));
            chlist.add(new Channel("HN", "河南省"));
        } else if (level.equals("2")) {
            if (parent.equals("SX")) {
                chlist.add(new Channel("XA", "西安市"));
                chlist.add(new Channel("XY", "咸阳市"));
            } else if (parent.equals("HN")) {
                chlist.add(new Channel("ZZ", "郑州市"));
                chlist.add(new Channel("PDS", "平顶山市"));
            }
        } else if (level.equals("3")) {
            if (three.equals("XA")) {
                chlist.add(new Channel("WY", "未央区"));
                chlist.add(new Channel("XZ", "小寨区"));
            } else if (three.equals("XY")) {
                chlist.add(new Channel("D", "秦都区"));
                chlist.add(new Channel("C", "杨凌区"));
            } else if (three.equals("ZZ")) {
                chlist.add(new Channel("E", "中原区"));
                chlist.add(new Channel("F", "二七区"));
            } else if (three.equals("PDS")) {
                chlist.add(new Channel("G", "新华区"));
                chlist.add(new Channel("H", "卫东区"));
            }
        }

        String json = JSON.toJSONString(chlist);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(json);
    }
}

写回答

1回答