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