使用select2插件實現select選擇框的一些經常使用功能

在這以前對於select下拉框我使用bootstrap-select插件來處理select下拉選擇框：https://www.wj0511.com/site/detail.html?id=224

可是如今咱們公司使用的是select2插件來處理select選擇框，這裏我就來簡單的介紹下select2插件的簡單使用

一：下載select2

select2的github地址：https://github.com/select2/select2

select2的官方文檔地址：https://select2.org/

訪問github進行下載select2插件

二：簡單使用select2

1：引入jquery和select2

<!--引入jquery和select2相關js-->  
<script src="./js/jquery.min.js"></script>  
<script src="./select2/js/select2.min.js"></script>  
<script src="./select2/js/i18n/zh-CN.js"></script>  
<!--引入select2的css-->  
<link href="./select2/css/select2.min.css" rel="stylesheet">

2：html

(1)單選

<select class="select-status" name="select-status">  
    <option value="0">待審覈</option>  
    <option value="1">審覈經過</option>  
    <option value="2">審覈駁回</option>  
</select>

(2)多選

<select class="select-status" name="select-status[]" multiple="multiple">  
    <option value="0">數學</option>  
    <option value="1">語文</option>  
    <option value="2">英語</option>  
    <option value="3">體育</option>  
    <option value="4">音樂</option>  
    <option value="5">物理</option>  
</select>

3：js

<script>  
    $(document).ready(function() {  
        $('.select-status').select2({});  
    });  
</script>

如上的過程就是簡單的使用select2插件，select2方法有不少經常使用的參數，下面介紹幾種查用的參數

1：language：用於select的提示語言，默認爲英文

$('.select-status').select2({  
    language: 'zh-CN',//用於指定select2提示語爲中文  
});

2：placeholder：用戶指定select框的提示符,select框沒有選擇時的提示信息

$('.select-status').select2({  
    placeholder: '請選擇',  
});

3：width：設置select框的寬度

$('.select-status').select2({  
    width: '400px',  
});

4：maximumSelectionLength：最大能夠選擇的個數,用戶select的多選配置,默認爲0，表示能夠選擇任意個數

$('.select-status').select2({  
    maximumSelectionLength: 2,  
});

5：maximumInputLength：select搜索時最多能夠提過的搜索字符數,默認爲0，表示能夠提供任意數量的字符用於搜索

$('.select-status').select2({  
    maximumInputLength: 2,  
});

6：minimumInputLength：select搜索時至少提供指定字符數用於檢索，及若是小於指定字符數不會進行檢索,默認爲0，表示只要提供檢索字符就開始進行搜索

$('.select-status').select2({  
    minimumInputLength: 2,  
});

7：multiple：表示是否將select設置爲多選，默認爲false，表示不進行設置，及若是你想要將一個單選的下拉框這是爲多選的話，你能夠將multiple設置爲true

8：closeOnSelect：表示在select框進行選擇時，是否關閉選擇下拉，默認爲true，表示選擇後關閉下拉

$('.select-status').select2({  
    closeOnSelect: false,  
});

9：debug：表示是否開啓調試模式，默認爲false，不開啓調試模式

$('.select-status').select2({  
    debug: true,  
});

10：disabled：表示下拉選擇是否禁止選擇，默認爲fasle，表示能夠選擇下拉項，爲true時選擇項被禁用不可選擇

$('.select-status').select2({  
    disabled: true,  
});

11：data:是一個數組對象，當html中的select中沒有option時，設置data參數能夠從data參數中設置下拉選項

var data = [  
    {  
        id: 0,  
        text: '選項一'  
    },  
    {  
        id: 1,  
        text: '選項二'  
    },  
    {  
        id: 2,  
        text: '選項三',  
        disabled:true  
    },  
    {  
        text: '父級選項',  
        children:[  
            {  
                id: 3,  
                text: '子級選項一'  
            },  
            {  
                id: 4,  
                text: '子級選項二'  
            },  
        ]  
    },  
];  
$('.select-status').select2({  
    data: data,  
});

id：表示option的value值

text：表示option的顯示值

disabled：爲true時表示禁止選擇

children：表示選擇框有子父級關係

生成的select現象以下：

(1)單選框現象：

多選框現象：

12：ajax：表示使用ajax來實現渲染下拉框的選項

ajax的經常使用參數有：

url：獲取選項下拉選項數據的接口地址

dataType：數據類型

delay：請求數據等待時長

data：向接口傳遞的參數

processResults：獲取接口數據，將接口數據渲染到下拉選項中

cache：是否開啓緩存

簡單實例以下：

(1)：無分頁的下拉選擇

這裏以接口返回的數據以下爲例：

{  
    "result": [  
        {  
            "value": 1,//對應id  
            "name": "選項1"//對應text  
        },  
        {  
            "value": 2,  
            "name": "選項2"  
        },  
        {  
            "value": 3,  
            "name": "選項3"  
        }  
    ],  
    "total\_count": 3  
}

這時候使用ajax來渲染下拉選擇以下：

$('.select-status').select2({  
    ajax: {  
        url: '/index.php?r=select/search',//接口地址  
        dataType: 'json',  
        delay: 250,  
        data: function (params) {  
            return {  
                keyword: params.term, // 搜索條件,表示你在下拉搜索時輸入的參數  
            }  
        },  
        processResults: function (json, params) {  
            data = json.result  
            //將接口返回的參數進行賦值  
            data = $.map(data, function (obj) {  
                obj.id = obj.value;  
                obj.text = obj.name;  
                return obj;  
            });  
            return {  
                results: data,  
            };  
        },  
        cache: true  
    },  
});

(1)：分頁的下拉選擇

$('.select-status').select2({  
    width:'400px',  
    ajax: {  
        url: '/index.php?r=select/search',//接口地址  
        dataType: 'json',  
        delay: 250,  
        data: function (params) {  
            return {  
                keyword: params.term, // 搜索條件,表示你在下拉搜索時輸入的參數  
                page: params.page  //當前的頁碼  
            }  
        },  
        processResults: function (json, params) {  
            params.page = params.page || 1;  
            data = json.result  
            //將接口返回的參數進行賦值  
            data = $.map(data, function (obj) {  
                obj.id = obj.value;  
                obj.text = obj.name;  
                return obj;  
            });  
            return {  
                results: data,  
                pagination: {  
                    more: (params.page \* 10) < json.total\_count  
                }  
            };  
        },  
        cache: true  
    },  
});

如上就是select2插件的簡單使用