select2 github 仓库

小林工程师 dp-pro gitee 仓库

本文所使用的 select2 由小林工程师二次封装过.

dp-pro 的 select2 的bug

dp-pro 中的源码

<h3>&nbsp;&nbsp;&nbsp;省市区级联选择</h3>
<div class="row">
    <div class="col-md-4">
        <select class="province form-control"></select>
    </div>
    <div class="col-md-4">
        <select class="city form-control"></select>
    </div>
    <div class="col-md-4">
        <select class="district form-control"></select>
    </div>
</div>

// 初始化省份选择，及级联函数
$('.province').selectBindEx({
    url: '../../sys/area/select?areaCode=0',
    placeholder: '请选择省份',
    value: 'areaCode',
    text: 'name',
    change: function(data) {
        $('.city').selectBindEx({
            url: '../../sys/area/select?areaCode=' + data,
            placeholder: '请选择地市',
            value: 'areaCode',
            text: 'name',
            change: function(data) {
                $('.district').selectBindEx({
                    url: '../../sys/area/select?areaCode=' + data,
                    placeholder: '请选择区县',
                    value: 'areaCode',
                    text: 'name'
                });
            }
        });
        // 选择省份后，清空地址选择
        $('.city').val(null).trigger('change');
    }
});
// 初始化地市选择
$('.city').selectInitEx('请选择地市');
// 初始化区县选择
$('.district').selectInitEx('请选择区县');

dp-pro 中的 select2 有级联选择的 demo 但有一个问题就是:

设有 A-B-C 三个级联选项, 选中 A 后, B 填充对应的内容 B1, 这时再选中 A 中某项, B 中就会新增内容 B2, 而 B1 还存在着, 没被删去.

解决过程

首先, 在 change 事件中加入: $(‘.city’).empty();

一次点击多次请求

每点击一次 A 后再点击 B 都会产生比上次多一次的请求, 这是因为每次点击 A 都会让 B 绑定一个新事件, 这就导致了多一次点击就多一次请求, 并且会积累下去. 这样是很不合理的, 所以应该在为 B 注册新事件时把之前的事件注销掉.

点进 selectBindEx 可以发现里面绑定的事件名为 change, 所以只需要每次点击 A 把 B 的 change 注销掉就行

$(‘.city’).off(‘change’)

select 2 的显示与隐藏

有些时候需要动态控制下拉框的显示与隐藏, select2 与普通的下拉框有一点区别

普通下拉框只需要通过更改 css 来控制它的显示与隐藏, 如下:

1 2	$('#select').css('display', '');//显示 $('#select').css('display', 'none');//隐藏

而这种方法对于 select2 是无效的, 需要通过它特定的方法

1 2	$('#select2')..select2().next().show();//显示 $('#select2')..select2().next().hide();//隐藏

设置 select2 为只读

官方文档里的设置方法是:

1	$('#select').select2("readonly", true);

但试了之后并不管用(可能是二次封装的问题), 还好官方给出的禁用选项是好使的:

1	$('#select').select2("enable", false);

加载更多

参考链接

官方文档

为了减轻服务器负担, 结合实际情况一般都是在下拉框加载部分内容, 当用户下拉到底还有数据没加载时再向服务器发送请求.

前端: select2 设置

后台: 分页查询. 这个没啥好说的

$('#select').select2({
    theme: "bootstrap",
    language: "zh-CN",
    width: 'off',
    placeholder: '请输入关键字',
    ajax: {
        type: 'post/get',//这里好像一定要大写, 我写小写报错了
        url: '请求链接',
        dataType: 'json',
        contentType : 'application/json',
        delay: 250,//用户输入后延时多长才向服务器发起请求(防止过于频繁的请求)
        data: function(params){//请求参数, 根据实际情况配置
            if(params.term == null){
                params.term = '';
            }
            //这一步是根据空格拆分关键字, 选做
            var keyword = params.term.split(/\s+/);
            var param = {
                name: keyword,//关键字
                //后台的分页查询需要用到以下参数
                pageNumber: params.page || 1,//pageNumber 是给服务器的, params.page 是下拉框已载入的页数
                pageSize: 10,//每页大小
                sortOrder: "asc",//排序
            };
            return JSON.stringify(param);
        },
        processResults: function(r, params) {//处理返回的结果, r 是服务器返回的结果, params 就是请求参数函数中的 params
            params.page = params.page || 1;//暂时不知道这里为什么这写, data 里的倒是很好理解, null||1=1
            var itemList = [];
            $.each(r.rows, function(idx, item) {//处理返回的数据
                itemList.push({id: item.id, text: item.name});
            });
            return {
                results: itemList,
                pagination: {
                    more: r.pageNo<r.totalPages//返回的参数中带有当前页数和总页数, 通过比对两个页数决定是否继续加载
                }
            }
        },
        cache: true,
    },
    minimumInputLength: 1//最少输入字符
});

一颗牛肉丸

关于 select2