這篇博文

http://www.php.cn/js-tutorial-384637.html

註釋寫的比較詳細, （不過他做了很多修改）

https://blog.csdn.net/bossxu_/article/details/80368471  這個也可以看看

首先，頁面上引入jquery，和select2

<link rel="stylesheet" type="text/css" href="../../select2-v4.0.6/css/select2.min.css"/>
<script src="../../jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../select2-v4.0.6/js/select2.min.js" charset="utf-8"></script>
<script src="../../select2-v4.0.6/js/i18n/zh-CN.js" charset="utf-8"></script>
 

頁面上寫好select

<select class="js-example-basic-single content-input" name="circleId"  id="circleId"></select>

js

//獲取url中的引數
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標引數的正則表示式物件
    var r = window.location.search.substr(1).match(reg); //匹配目標引數
    if (r != null) return unescape(r[2]); return null; //返回引數值
}
var userId = getUrlParam('userId')
$('#circleId').select2({
    placeholder: '請選擇圈子',
    language: "zh-CN",
    // data:[{ id: employeeId, text: partmentName}],  //  預設值填寫  value 是id  text:是名字 不能使用其他欄位
    // inputMessage:'資訊科',
    ajax: {
        url: options["url"],
        type: "post",
        dataType: "json",
        delay: 250,
        headers: {
            apikey: sessionStorage.getItem('apikey') || 'test'
        },
        data: function(params){
            // 傳遞到後端的引數
            return {
                // 搜尋框內輸入的內容
                // selectInput: params.term,
                // 當前頁
                // page: params.page || 0,
                // 每頁顯示多少條記錄，預設10條
                // row: 10,
                cmd: cmd,
                data: JSON.stringify({
                            isJoin: 2,
                            page: params.page || 0,
                            row: 10,
                            userId: userId,
                            keyWord: params.term
                        }), 
            };
        },
        
        processResults: function (data, params) {
            params.page = params.page || 0;
            var d_l = data.data;

            return {
                results: d_l,
                pagination: {
                    more: (params.page) < data.total
                }
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    templateResult: function (repo) {
        if (repo.loading) {
            return repo.text;
        } else {
            return repo.circleName;      //選中 顯示的名稱
        }

    },
    templateSelection: function (data) {
        return data.circleName||data.text;
    }
});