適用場景：下拉框中有大量資料的情況（建議100條資料以上就要考慮使用分頁獲取的方式了）。

直接上程式碼

    引入相關js和css

    select2/select2.min.css

    select2/select2.min.js

    select2/i18n/zh-CN.js

/**
 * ajax獲取select2下拉框資料（帶滑鼠滾動分頁）
 * @param selectId 下拉框id
 * @param options 選項，包含如下欄位：
 * url 資料介面url
 * pageSize 每次載入的資料條數
 * name 下拉框顯示欄位名稱
 * value 下拉框value欄位名稱
 * placeholder 預設顯示的文字
 * selected 預設選中項，格式：[{id:1,text:"選項1"},{id:2,text:"選項2"}]
 * formatResult 返回結果回撥函式，可以在該回調中，自定義下拉框資料的顯示樣式，比如：加入圖片等
 * templateSelection 選中項回撥，該引數必須與formatResult引數搭配使用
 * 注意點1 : 後端介面需返回 data（具體資料）和 total（總頁數）兩個欄位
 * 注意點2 : 兩個自定義的回撥函式中，必須要把處理結果return回來，如果沒有傳入formatResult引數，則採用預設的顯示樣式
 */
function ajaxSelect2 (selectId,options,formatResult,formatSelected) {
    var value = options["value"];
    var name = options["name"];
    var flag = (typeof formatResult === "function") ? true : false;
    var select2Option = {
        language: "zh-CN",
        allowClear: true,
        placeholder: options["placeholder"] || "請選擇",
        ajax:{
            url: options["url"],
            type: "post",
            dataType: "json",
            delay: 250,
            data: function(params){
                // 傳遞到後端的引數
                return {
                    // 搜尋框內輸入的內容
                    selectInput: params.term,
                    // 當前頁
                    curPage: params.page || 1,
                    // 每頁顯示多少條記錄，預設10條
                    pageSize: options["pageSize"] || 10
                };
            },
            cache:true,
            processResults: function (res, params) {
                params.page = params.page || 1;
                var cbData = [];
                if (flag) {
                    cbData = res.data;
                } else {
                    var data = res.data;
                    var len = data.length;
                    for(var i= 0; i<len; i++){
                        var option = {"id": data[i][value], "text": data[i][name]};
                        cbData.push(option);
                    }
                }
                return {
                    results: cbData,
                    pagination: {
                        more: params.page < res.total
                    }
                };
            }
        },
        escapeMarkup: function (markup) {
            // 字元轉義處理
            return markup;
        },
        // 最少輸入N個字元才開始檢索，如果想在點選下拉框時載入資料，請設定為 0
        minimumInputLength: 0
    };
    if (flag) {
        select2Option.templateResult = formatResult;
        select2Option.templateSelection = formatSelected;
    }
    var $select =  $("#"+selectId);
    $select.select2(select2Option);
    if (!flag) {
        // 預設選中項設定
        var html = '';
        var values = [];
        var selected = options['selected'];
        if (selected) {
            $.each(selected,function (index,item) {
                values.push(item.id);
                html += '<option value="'+item.id+'">'+item.text+'</option>';
            });
            $select.append(html);
            $select.val(values).trigger('change');
        }
    }
}
 

    呼叫方式：

var options = {
    url: "",      // 資料介面url
    pageSize: 10, // 每次載入的資料條數
    value: "id",  // 下拉框value欄位名稱
    name: "name", // 下拉框顯示欄位名稱
    selected: []  // 預設選中項，格式：[{id:1,text:"選項1"},{id:2,text:"選項2"}]
};
ajaxSelect2("下拉框id",options);