动态二级联动

功能： 选定了用户类型之后，自动匹配出该用户类型下的所有用户。

效果图：

 

 

 

 

前端：

<div class="form-group">
                    <label class="col-sm-3 control-label"><em></em>智慧校园用户类型</label>
                    <div class="col-sm-6 col-md-7 col-lg-6">
                        <select name="campusUserType" id="campusUserType"
                                class="form-control validate[required] input-background"
                                onclick="campusUserConnect(this.value)">
                            <option value="">--请选择--</option>
                            <option th:each="campusUserType:${campusUserTypes}" th:value="${campusUserType.key}" th:text="${campusUserType.value}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"><em></em>智慧校园用户</label>
                    <div class="col-sm-6 col-md-7 col-lg-6">
                        <select name="campusUserNo" id="campusUserNo" th:value="campusUser.userNo"
                                class="form-control validate[required] input-background">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>

 

js:

<script>
        function campusUserConnect(campusUserType) {
            document.kqUserInsertForm.campusUserNo.length = 0;
            document.kqUserInsertForm.campusUserNo.options[0] = new Option('--请选择--', '');
            $.ajax({
                url: '/catalog/kqUser/findKqUserByType',
                type: 'post',
                data: {"campusUserType": campusUserType},
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        var list = result.data
                        $(list).each(function (index, element) {
                            document.kqUserInsertForm.campusUserNo.options[document.kqUserInsertForm.campusUserNo.length] = new Option(element.name, element.userNo);
                        });
                    }
                    else
                        layer.msg(result.message);
                }
            })
        }

后台Controller：

@RequestMapping("/findKqUserByType")
    @ResponseBody
    public Result findUserByType(Integer campusUserType) {
        List<CampusUser> campusUsers = kqUserService.findCampusUserByType(campusUserType);
        return ResultGenerator.genSuccessResult(campusUsers);
    }

后台Service：

public List<CampusUser> findCampusUserByType(Integer campusUserType){

        return campusUserRepository.findByType(campusUserType);
    }