jquery实现简单的省市联动

样式

    <select id="lv1">
        <option>请选择</option>
    </select>
    <select id="lv2">
        <option>请选择</option>
    </select>

一、使用Ajax发送请求为省级赋值

 // 第一次Ajax是为了获取省信息
            $.ajax({
                url:"/test/demo",
                cache:true,
                contentType:"application/x-www-form-urlencoded",
                data:"level=1",
                dataType:"json",
                type:"get",
                success:function (data) {
                    // data代表后端传的数据
                    // console.log(data);
                    for (let i = 0; i < data.length;i++){
                        let my_option = data[i];
                        $("#lv1").append("<option value='"+my_option.id+"'"+">"+my_option.name+"</option>");
                    }
                }
            });

二、写一个内容改变事件，但省级下拉框的内容发生改变时，执行改方法，为市级下拉框赋值

 // 为省的下拉框绑定一个监听事件，给市的下拉框赋值
            $('#lv1').on('change',function () {
                // 第二次获取市的信息
                let parent = $(this).val();
                console.log("parent:"+parent)
                // 获取省的id
                // let parent = $("#lv1").val();
                $.ajax({
                    url:"/test/demo",
                    data:{"level":"2","parent":parent},
                    dataType: "json",
                    type: "get",
                    success:function (data) {
                        console.log(data);
                        $("#lv2>option").remove();
                        for (let i = 0; i < data.length;i++){
                            let my_option = data[i];
                            $("#lv2").append("<option value='"+my_option.id+"'"+">"+my_option.name+"</option>");
                        }
                    }
                })
            })

三、后端根据level的值给出相应的反馈

@WebServlet("/test/demo")
public class DemoServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String level = req.getParameter("level");
        List<MyOption> list = new ArrayList<>();
        if ("1".equals(level)){
            // 获取省级信息
            list.add(new MyOption(1,"湖北省"));
            list.add(new MyOption(2,"四川省"));
            list.add(new MyOption(3,"河南省"));
            list.add(new MyOption(4,"广东省"));
            list.add(new MyOption(5,"广西壮族自治区"));
        } else if("2".equals(level)){
            String parent = req.getParameter("parent");
            if ("1".equals(parent)){
                list.add(new MyOption(1,"武汉市"));
                list.add(new MyOption(2,"荆州市"));
            }else if ("2".equals(parent)){
                list.add(new MyOption(1,"成都市"));
                list.add(new MyOption(2,"绵阳市"));
            }else if ("5".equals(parent)){
                list.add(new MyOption(1,"贺州市"));
                list.add(new MyOption(2,"桂林市"));
            }
        }

        String string = JSON.toJSONString(list);
        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().print(string);
    }
}