[select2] Ajax分页获取数据

1. 设置select元素ID.

2. 配置API地址,如果需要身份认证,就添加headers.

3. 后端需要返回

  results,形如 [ { id:"option的值" , text:"option的显示文本" } ].

  ItemCount , 数据总数.

        $('select元素ID').select2({
            placeholder: '',
            allowClear: true,
            ajax: {
                url: "API地址",
                delay: 500,
                headers: {
                    'Authorization': 'Bearer ' + "Token值"
                },
                data: function (params) {
                    var query = {
                        searchText: params.term,
                        page: params.page || 1
                    }
                    return query;
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 10) < data.ItemCount
                        }
                    }
                }
            }
        });

 

 Select2选中事件,后端返回的results中,除了id,text还可以带其他数据.

 有些情况下需要通过选中数据带出其他数据,可以使用e.params.data['属性名'] 把需要的数据获取出来,填充到其他元素中.

   // 选中事件
        $("select元素ID").on("select2:select", function (e) {
            // e.params.data['属性名'];
        });

 

posted @ 2023-04-20 17:01  WikiChen  阅读(181)  评论(0编辑  收藏  举报