select2插件使用小记

 

　　插件官网：https://select2.github.io/examples.html

　　页面引入：

// 页面顶部
<link rel="stylesheet" type="text/css" href="css/select2.min.css">

// 页面底部
// 依赖jQuery，引入jQuery之后，还需引入以下js文件
<script type="text/javascript" src="js/select2/select2.full.min.js"></script>
<script type="text/javascript" src="js/select2/lang/zh-CN.js"></script>

　　调用select2

var util = {
    select2: function(options){
        select2(options);

        //将输入的值作为其值
        var inputAsValue = function($target, value){
            var id = "select2-" + $target.attr("id") + "-container";
            $("#advertiser_name_input").val(value).keyup();
            $("#"+id).text(value);
        };

        function select2(arg) {
            var requireName = arg.requireName;
            arg.target.select2({
                placeholder:arg.placeholder, // 文本框的提示信息
                language: 'zh-CN',
　　　　　　　　　// 若不想引入zh-CN.js文件，可注释上一句，改为下面的即可
　　　　　　　　　/*
　　　　　　　　　　language: {

　　　　　　　　　　　　noResults: function() {
　　　　　　　　　　　　　　return"未找到结果"
　　　　　　　　　　　　} ,searching: function() {
　　　　　　　　　　　　　　return"搜索中…"
　　　　　　　　　　　　}

　　　　　　　　　　}
　　　　　　　　　*/
　　             minimumInputLength: 1, // 至少输入n个字符，才去加载数据；若设置为0，则点击选择框，不用输入内容，就去加载数据；默认为0
                maximumInputLength: 100, // 限制最大字符，以防坑

                data: options.data,
                ajax: {
                    url: arg.url,
                    dataType: 'json',
                    method: 'post',
                    quietMillis:100,
                    delay: 250,
                    data: function (params) {
                        var data = {}, id;
                        data[arg.requireName] = params.term; // 查询的关键字
                        // data['page'] = params.page;  
                        return $.extend(true, data, arg['other']);
                    },
                    processResults: function (result, params) {
　　　　　　　　　　　　// params.page = params.page || 1;
                        if(result && result.flag && !$.isEmptyObject(result.data)){
                            var resultData = result.data,
                                selectData = [], selectObj = {};
                            for(var i=0,len=resultData.length; i<len; i++){
                                selectObj = {
                                    'id': resultData[i]['id'] || '',
                                    'text': resultData[i]['name'] || '',
                                    'industry_id': resultData[i]['industry_id'] || ''
                                };
                                selectData.push(selectObj);
                            }
                            return {
                               /* pagination: {
                                    more: (params.page * 30) < 100 //data.total_count
                                },*/
                                results: selectData
                            };
                        }else{
                            var noData = [
                                    {id:0,text:'暂无数据'}
                                ];
                            return {
                                results:noData
                            };
                        }
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; }
            });
            arg.target.on("change", function(e){
                options.change && options.change();
            });
        }
    }
};

// 调用
util.select2({
    target: $('#select'),
    url: pageInfo.activityNameUrl,
    requireName: 'key',
    callback: '',
    data: {'id', 11},
    change: function(){
        var $select = $('#select');
        var data = $select.select2("data")[0]; 
        // 其余操作
    }
});

　　注意：注释的代码可以实现分页功能, 鼠标拖动滚动条往下滚时，再去请求再显示下一页的效果；但是需要后台支持，根据请求参数page的页数，返回响应的数据。

　　设置默认值或回填值：

 if(selectId !=''){
      $("#select").html('<option value="'+selectId +'">'+selectVal+'</option>').trigger('change');
 }

　　显示全部：

名称：<select class="select-w100 select2" name="select" id="select">
          <option value="">全部</option>
     </select>

 　　获取值（多选值，默认用逗号分隔）：

获取多选值
  $('#save-btn').click(function(){
       var city = $('#city').val();
       var cityDesc = $('#city option:selected').text();
   })

 

　　特殊地方：select2下拉框插件，可以做多选，但是每选一次就会收起一次下拉。
　　逐个勾选，多选完后，点击下拉框外面的区域再收起。

　　可以设置：closeOnSelect: false