首页 > 代码库 > select2插件使用小记

select2插件使用小记

  页面引入:

// 页面顶部
<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 = http://www.mamicode.com/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‘,
   minimumInputLength: 2, // 至少输入n个字符,才去加载数据
maximumInputLength: 100, // 限制最大字符,以防坑
 
                data: options.data,
                ajax: {
                    url: arg.url,
                    dataType: ‘json‘,
                    method: ‘post‘,
                    quietMillis:100,
                    delay: 250,
                    data: function (params) {
                        var data =http://www.mamicode.com/ {}, 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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ [
                                    {id:0,text:‘暂无数据‘}
                                ];
                            return {
                                results:noData
                            };
                        }
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; },
                minimumInputLength: 1
            });
            arg.target.on("change", function(e){
                options.change && options.change();
            });
        }
    }
};

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

  注意:注释的代码可以实现第一次只显示30(若总条数>30),鼠标拖动滚动条往下滚时,再去请求再显示30条的效果;但是会重复显示之前的30条数据。

  设置默认值或回填值:

 if(selectId !=‘‘){
      $("#select").html(‘<option value="http://www.mamicode.com/‘+selectId +‘">‘+selectVal+‘</option>‘).trigger(‘change‘);
 }

  显示全部:

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

 

select2插件使用小记