在這之前對於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插件的簡單使用