select2常用用法

select2是一款开源插件，功能丰富。
目前项目中的select2已经升级到4.0版本，官方文档

常规用法

最常见的用法是先拿到数据，然后将数据赋给select2，注意数据必须包含id和text两个属性，如果从服务端返回的数据未包含这两个字段，需要经过转换,实例如下：

$.getJSON('common.do?action=getSysCzrylist', function (data) {
         $("#blry").select2({
             language: 'zh-CN',
             data: $.map(data.czrys, function (n) {
                 return {id: n.rygh, text: n.ryxm}
             })
         }).val(data.rybm).trigger('change');
     })

获取选中数据

上文提到赋值给select2的数据数组必须包含id和text两个属性，所以实际绑定select2的数据不仅限于id,text这两个字段。

获取选中的数据

$('#select2').select2('data');

返回的数据类型这样：

{
    "id": "001",
    "text": "阿莫西林",
    "price": 12,
    "brand": "",
    // 其他属性...
}

ajax用法

select2支持数据ajax获取，适用用于选项数据量较大的情况。

以个性化费用中的收费项目为例

$("#ypmc").select2({
            language: 'zh-CN',
            ajax: {
                url: "yyhynpt_gxhfy.do?action=get_items",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        xmmc: params.term || '', // search term
                        pageSize: 30,
                        page: params.page || 1
                    };
                },
                processResults: function (data, params) {
                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used

                    params.page = params.page || 1;

                    return {
                        results: data.items.map(function (n) {
                            return $.extend({id: n.xmdm, text: n.xmmc}, n)
                        }),
                        pagination: {
                            more: (params.page * 30) < data.total
                        }
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            }, 
            minimumInputLength: 0,
        }).change(function () {
          //切换选中项事件
        });

select2 ajax需要服务端支持分页，要求与bootstrapTable的分页一致，二者可以相互兼容。 在select2的ajax对象中指定了查询参数，如项目名称，分页大小pageSize，当前页page

 data: function (params) {
                    return {
                        xmmc: params.term || '', // search term
                        pageSize: 30,
                        page: params.page || 1
                    };
                }

如返回的数据未包含id,text字段，则需要在processResults中进行转换，示例已经进行了转换

ajax方式默认值

采用ajax方式不同于普通方式，在初始化的时候并未得到数据，只有select被点击才触发查询。那么在初始化的时候怎么给select2默认数据呢?例如，已经存储的信息在查看详情的时候怎么把上次选中的结果呈现在页面上。

这种情况需要构造一个选中项赋给select，示例如下

 $('' + this.person.cost.name + '')
                .appendTo('#ypmc');