select2 每点击一次就加载数据

最新推荐文章于 2021-08-05 18:30:27 发布

Song_Estelle

最新推荐文章于 2021-08-05 18:30:27 发布

阅读量987

点赞数

分类专栏：小知识前端

本文链接：https://blog.csdn.net/weixin_43484014/article/details/102953214

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

小知识

32 篇文章 1 订阅

订阅专栏

select2 每点击一次就加载数据

1.html部分

<div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">项目法人</label>
                    <div class="col-sm-8" style="position: relative;">
                        <select class="form-control" id="legalPerson" name="legalPerson" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

2.js 部分

$(function () {
        $("#legalPerson").select2({
            theme: "bootstrap",
            language: "zh-CN",
            placeholder: "请选择",
            placeholderOption: "first",
            ajax: {
                url: prefix + "/loadDeptList",
                dataType: 'json',
                delay: 250,
                type: "post",
                data: function (params) {
                    return {
                        name: params.term
                    };
                },
                processResults: function (data, params) {
                    var results = [];
                    if (data.code == 0) {
                        var list = data.data;
                        if (list && list.length > 0) {
                            $.each(list, function (index, item) {
                                var dataarr = {};
                                dataarr.id = item.deptId;
                                dataarr.text = item.deptName;
                                results.push(dataarr);
                            });
                        }
                    }
                    return {
                        results: results
                    };
                },
                cache: false
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            language: {
                noResults: function (params) {
                    var result = "没有结果？点击问号新建单位";
                    return result;
                }
            }
        });
    });

3.java 部分

@PostMapping("/loadDeptList")
    @ResponseBody
    public ResultUtil loadDeptList(String name) {
        ResultUtil result = new ResultUtil();
        Map<String, Object> record = new HashMap<>();
        record.put("deptName", name);
        List<Map<String, Object>> deptList = regProjectService.selectDeptMapList(record);
        result.setCode(0);
        result.setMsg("请求成功");
        result.setData(deptList);
        return result;
    }