Springboot+Mybatis+Jquery实现自定义二级联动

       本篇博客主要实现一个自定义的二级联动，说到二级联动举一个简单的例子就理解了二级联动的意思。比如我们网购添加收货地址的时候，我们首先选择省份，然后选择对应省份里的市，我们选择了陕西省，选择市的时候，只会出现陕西省下的市，如西安市，而不会出现山东省的烟台市。

       在这里以前后台进行交互查询，实现一个根据学校实现选择学院的二级联动功能。共分为以下几个步骤：

建立二级联动select

       建立两个select，第一个select存放所要选取的学校，第二个里面什么都不放。通过js将获取到的第一个select中option的某个value值传作为查询条件在数据库中进行查询，将对应的结果显示在第二个select中的option中。

       前台html页面代码如下：

<td>
      <select id="university" onchange="setSelectCollege()">
            <option value="0" disabled="disabled" selected="selected">--请选择学校名称--option>
            <option value="zj">浙江大学option>
            <option value="xn">西北农林科技大学大学option>
            <option value="xd">西安电子科技大学option>
      select>
td>
<td>
      <select id="college" >
            <option value="0" disabled="disabled" selected="selected">--请选择学院名称--option>
      select>
td>

select中加入onchange事件

       用户选择内容发生改变时，即：选取不同的option时，获取不同的value值，通过onchange进行触发在学院下拉框里显示不同学校的学院。

       onchange函数js代码如下：

function setSelectCollege() {
        var index = $('#university option:selected').text();
        var index1=$('#university option:selected').val();
        var optionJson=[];
        $.ajax({
            url: "/selectCollege",
            type: "post",
            data: {"un":index1},
            datatype: "json",
            success:function(data){
                alert(data.length);
//                alert(data[0].college);
                optionJson = data;
                var a=data.length;
                var selectObj=document.getElementById("college");
                selectObj.options.length=0;
                selectObj.options.add(new Option("请选择学校院系",0));
                for(var i=0;inew Option(optionJson[i].college,i+1));
                }
            }
        })
    }

       在谷歌浏览器中进行调试的时候，数据信息如下所示(以选择xd为例)：

       所以在js中的success function函数中添加的应该是optionJson[i].college而不是optionJson[i]。

后台实现数据的传递

       数据库中的信息如下所示：

数据库交互

       数据库交互mapper代码如下：

@Select("select college from university where un=#{un}")
    public List collegeInfo(@Param("un") String un);

同时建立一个实体类University，用来存放查询得到数据信息，实体类中包含un（学校）和college（学院）两个属性就行，添加默认构造方法和set，get方法。

       service代码如下：

public ManageMapper managemapper;

public List collegeInfo(String  un){
        return managemapper.collegeInfo(un);
    }

       controller代码如下：

@RequestMapping(value = "/selectCollege", method = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public List selectCollege(HttpServletRequest request){
        String university=request.getParameter("un");
        System.out.println(university);
        List universityListInfo=manageservice.collegeInfo(university);
        return universityListInfo;
    }

       注意，前台代码中

var index = $('#university option:selected').text();
var index1=$('#university option:selected').val();

其中index输出的是问本，也就是输出浙江大学，西北农林科技大学和西安电子科技大学这些。
其中index1输出的是value值，数据库中存放的是英文属性，所以我们要获取的是英文属性，也就是value值。

效果演示

       初始页面如下所示：

       选取不同学校页面如下所示：

       select中选取option的文本和value值的方法：
https://www.cnblogs.com/qq3245792286/p/6390504.html

       在本次项目中，运用的thymeleaf标签，有严格的校验功能，少一个反斜杠结尾都会出错，去除严格校验连接如下：
http://blog.csdn.net/weixin_37055021/article/details/78863148