利用Ajax使两个下拉框实现二级联动

第一个下拉框为院下的的系别，第二个下拉框为系下的专业

逻辑：

       先从数据库中得到所有的系，选择后第二个下拉框填充对应的专业；

 

取得所有系：

List<Xi> list= majorService.findAllXi();

        model.addAttribute("all_xi", list);
        return "student/form_student";

 

进行前台填充（第一个下拉框）

<select name="ssx" class="form-control" type="text" id="ssx" onchange="get_xiName(this.value)">
                            <option  disabled   style="display: none" selected value>----请选择----</option>
                            <option th:each="list:${all_xi}" th:value="${list.getId()}" th:text="${list.getXiName()}"></option>
                        </select>

遍历所有系别，填充   //onchange：选择后执行get方法，传入选择后的value

 

get方法：

function get_xiName(obj)
    {
        var id = obj;
        
        $.ajax({
            type: "get",
            dataType: "json",
            url: "/student/major",
            data: "xiId="+id,
            async: false,
            success: function(data){
                // var jsonList=eval("("+data+")");
                // var len = jsonList.length;
                //alert(jsonList);
                for(var i=0;i<data.length;i++){
                    var e = data[i];
                    $("#zy").append("<option value="+e.id+">"+e.className+"</option>");
                }
            },

        });
    }

 

Ajax请求后台方法

@ResponseBody
@GetMapping("major")
public String set_zy(String xiId)//Ajax动态获取系下的专业
{

    System.out.println("ajax请求后台成功");
    System.out.println(xiId);
    List<Major> majorlist = majorService.findAllzy(Integer.parseInt(xiId));
    Gson gson2 = new Gson();
    String str = gson2.toJson(majorlist);

    System.out.println(str);
    return str;
}

填充第二个下拉框

<select class="form-control" type="text"  name="zy" id="zy">
                            <option  disabled   style="display: none" selected value>----请选择----</option>
                        </select>

 

 

第一次写博客，以后一定养成习惯。