[TOC]
https://select2.org/
[select2詳解](https://blog.csdn.net/qq_27009517/article/details/116460532)
```
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
```
```
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<script>
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
```
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `ajax` | object | `null` | 提供支持[ajax data sources](https://select2.org/data-sources/ajax). |
| `allowClear` | boolean | `false` | 提供支持[clearable selections](https://select2.org/selections#clearable-selections). |
| `amdLanguageBase` | string | `./i18n/` | 參看[Using Select2 with AMD or CommonJS loaders](https://select2.org/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). |
| `closeOnSelect` | boolean | `true` | 控制在進行選擇后是否關閉下拉列表[closed after a selection is made](https://select2.org/dropdown#forcing-the-dropdown-to-remain-open-after-selection). |
| `data` | array of objects | `null` | 允許從數組渲染下拉選項[array](https://select2.org/data-sources/arrays). |
| `dataAdapter` | | `SelectAdapter` | 用于重寫內置的[DataAdapter](https://select2.org/advanced/default-adapters/data). |
| `debug` | boolean | `false` | 在瀏覽器控制臺中啟用調試消息. |
| `dir` | string | `ltr` | 設置selection和下拉容器上的`dir`[attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)來指示文本的方向. |
| `disabled` | boolean | `false` | 設置為true時,將禁用選擇控件. |
| `dropdownAdapter` | | `DropdownAdapter` | 用于重寫內置的[DropdownAdapter](https://select2.org/advanced/default-adapters/dropdown) |
| `dropdownAutoWidth` | boolean | `false` | |
| `dropdownCssClass` | string | `''` | 將其他CSS類添加到下拉列表容器中. `:all:`可以添加原始`<select>`元素上存在的所有CSS類|
| `dropdownParent` | jQuery selector or DOM node | `$(document.body)` | 允許您自定義下拉列表的位置.[customize placement](https://select2.org/dropdown#dropdown-placement)|
| `escapeMarkup` | callback | `Utils.escapeMarkup` | 處理由[自定義模板呈現的內容的自動轉義](https://select2.org/dropdown#built-in-escaping). |
| `language` | string or object | `EnglishTranslation` | 指定語言[language used for Select2 messages](https://select2.org/i18n#message-translations).中文語言文件為zh-CN.js可通過`language:"zh-CN"`設置中文語言 注意html頁面必須加載該zh-CN.js文件 |
| `matcher` | A callback taking search`params`and the`data`object. | | 處理自定義搜索匹配[search matching](https://select2.org/searching#customizing-how-results-are-matched). |
| `maximumInputLength` | integer | `0` | 可為搜索項提供的最大字符數[Maximum number of characters](https://select2.org/searching#maximum-search-term-length). |
| `maximumSelectionLength` | integer | `0` | 可以在多選擇控件中選擇的最大項目數。如果此選項的值小于1,則所選項目的數量將不受限制. |
| `minimumInputLength` | integer | `0` | [開始搜索所需的最小字符數.](https://select2.org/searching#minimum-search-term-length) |
| `minimumResultsForSearch` | integer | `0` | 顯示搜索框所需的最小結果數[display the search box](https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets). |
| `multiple` | boolean | `false` | 此選項啟用多選(Pillbox)模式。Select2將在初始化期間自動將多個HTML屬性的值映射到此選項. |
| `placeholder` | string or object | `null` | 指定控件的占位符[placeholder](https://select2.org/placeholders). |
| `resultsAdapter` | | `ResultsAdapter` | 用于重寫內置的[ResultsAdapter](https://select2.org/advanced/default-adapters/results). |
| `selectionAdapter` | | `SingleSelection`or`MultipleSelection`, depending on the value of`multiple`. | 用于重寫內置的[SelectionAdapter](https://select2.org/advanced/default-adapters/selection). |
| `selectionCssClass` | string | `''` | 將其他CSS類添加到選擇容器中。`:all:`:可用于添加原始`<select>`元素上存在的所有CSS類. |
| `selectOnClose` | boolean | `false` | 下拉列表關閉時實現自動選擇[automatic selection](https://select2.org/dropdown#automatic-selection) |
| `sorter` | callback | | |
| `tags` | boolean / array of objects | `false` | 用于啟用 free文本響應 即用戶在搜索框中輸入的文本動態創建新的option選項[free text responses](https://select2.org/tagging). |
| `templateResult` | callback | | 自定義搜索結果的渲染方式[search results are rendered](https://select2.org/dropdown#templating). |
| `templateSelection` | callback | | 自定義渲染選擇的方式[selections are rendered](https://select2.org/selections#templating). |
| `theme` | string | `default` | 允許您設置主題[theme](https://select2.org/appearance#themes). |
| `tokenizer` | callback | | 處理自由文本條目的自動標記的回調[automatic tokenization of free-text entry](https://select2.org/tagging#automatic-tokenization-into-tags). |
| `tokenSeparators` | array | `null` | 應用作標記分隔符的字符列表. 在selec2的文本框輸入文字然后用此分割符則自動標記(標記即選中狀態) |
| `width` | string | `resolve` | 支持容器寬度的自定義[customization of the container width](https://select2.org/appearance#container-width). |
| `scrollAfterSelect` | boolean | `false` | 如果為true,則使用closeOnSelect:false解決多個選擇的問題,該選項導致結果列表在每次選擇/取消選擇后滾動到第一個選擇(請參閱https://github.com/select2/select2/pull/5150). 這種行為是有意處理無限滾動 UI 問題(如果您需要這種行為,設置為 false) ,但它創建了一個問題與多選擇下拉框的固定長度。這個 pull 請求添加了一個可配置的選項,以便在這兩種需要的行為之間進行切換. |
```
var option = {
ajax:{
url:'xxx.com/admin/inedx',
url: function (params) {
//動態網址
return '/some/url/' + params.term;
},
data:function(params){
//默認查詢參數包含term、q、_type、page
var default_query ={
term:"xxx",//搜索框中的當前搜索詞
q:"xxx",//發送到服務器的參數名
_type:"xxx",//請求類型
page:1//要請求的當前頁碼。僅用于分頁(無限滾動)搜索
}
//自定以查詢參數
var query={
search: params.term,
type: 'public'
}
return query;
},
delay: 250,//用壺輸入搜索詞后延遲搜索的時間,(避免為輸入完重復查詢)
processResults:function (data) {
//修改從服務器返回的結果,data為服務器發送過來的數據
//返回需要包含一個results的數據
return {
results: data
};
},
transport: function (params, success, failure) {
//不使用ajax請求時,用此
//params 對包含用于生成請求的參數
//success 個回調函數,它獲取請求的結果“data”
//failure 指示無法完成請求的回調函數
var $request = $.ajax(params);
$request.then(success);
$request.fail(failure);
return $request;
}
},
ajax:null,
data:null,
allowClear:false,//為true則為可清除的選擇項(選擇項前面生成一個X,一般用于多選)
// amdLanguageBase:'./i18n/',
closeOnSelect:true,//此選項僅適用于多選控件,在選擇后保持下拉列表的打開狀態
dropdownAutoWidth:false,
dropdownCssClass:'',
dropdownParent:$(document.body),//拉列表選擇一個替代元素,將打開的下拉窗口放到這個定義的容器里
debug:false,
dir:'ltr',//rtl
disabled:false,
matcher:function(params,data){
//處理自定義搜索匹配
//如果沒有搜索詞,返回所有數據
if ($.trim(params.term) === '') {
return data;
}
// 如果沒有"text"屬性,就不要顯示該項目
if (typeof data.text === 'undefined') {
return null;
}
// `params.term` 用于搜索的詞
// `data.text` 是為數據對象顯示的文本
if (data.text.indexOf(params.term) > -1) {
//如果搜索的詞params.term在data中
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
// 您可以從這里返回修改后的對象
// 這包括在嵌套數據集中匹配所需的“children”
return modifiedData;
}
// 如果不應該顯示出來則返回null
return null;
},
maximumInputLength:0,
maximumSelectionLength:0,//多選時控制選擇的個數
minimumInputLength:0,
minimumResultsForSearch:0,
multiple:false,
placeholder:null,
escapeMarkup:function (markup) {
//(選中項的)字符轉義處理(直接觸發、展開觸發)
return markup;
},
// language:'en',
language:'zh-CN',
// resultsAdapter:ResultsAdapter,
// selectionAdapter:SingleSelection,
// dataAdapter:SelectAdapter,
// dropdownAdapter:DropdownAdapter,
selectionCssClass:'',
selectOnClose:false,
sorter:function(p,a){
/*
[
{
"selected": false,
"disabled": false,
"text": "阿拉斯加/夏威夷時區",
"children": [
{
"selected": true,
"disabled": false,
"text": "阿拉斯加州",
"id": "AK",
"title": "",
"_resultId": "select2-pid-result-sq29-AK",
"element": {}
},
{
"selected": false,
"disabled": false,
"text": "夏威夷",
"id": "HI",
"title": "",
"_resultId": "select2-pid-result-t91u-HI",
"element": {}
}
],
"title": "",
"element": {
"sizzle1655576925754": {
"undefined": {
"parentNode": [
124,
49,
true
]
}
}
}
},
{
"selected": false,
"disabled": false,
"text": "請選擇",
"id": "",
"title": "",
"element": {}
},
{
"selected": false,
"disabled": false,
"text": "xxxx",
"id": "157",
"title": "",
"_resultId": "select2-pid-result-78rt-157",
"element": {}
},
{
"selected": false,
"disabled": false,
"text": "xxxx",
"id": "158",
"title": "",
"_resultId": "select2-pid-result-dxq9-158",
"element": {}
}
]
*/
return p;
},
templateResult:function(state) {
//state.element:<option value="AK" data-select2-id="2">阿拉斯加州</option>
/*
{
"disabled": false,
"selected": false,
"id": 158,
"text": "xxx",
"title":"",
element:{...}
}
*/
//將返回結果的的text顯示到下拉框里(展開觸發)
//例子在option文本前加上圖片
if (!state.id) {
return state.text;
}
var baseUrl = "/images";
var $state = $(
'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
},
// 選中項的返回樣式模板
templateSelection:function(repo){
/*
{
"selected": true,
"disabled": false,
"text": "阿拉斯加州",
"id": "AK",
"title": "",
"_resultId": "select2-pid-result-ewsr-AK",
"element": {}
}
*/
//選中項樣式和上面option選項同步
if (!repo.id) {
return repo.text;
}
var baseUrl = "/images";
var $state = $(
'<span><img src="' + baseUrl + '/' + repo.element.value.toLowerCase() + '.png" class="img-flag" /> ' + repo.text + '</span>'
);
return $state;
},
tokenizer:function(param){
/*
{
"_type": "query",
"term": ""
}
*/
//自動標記回調(展開觸發)
return param;
},
tags:false,
theme:'default',
tokenSeparators:null,
width:'resolve',
scrollAfterSelect:false,
// 您可以通過createTag在新創建的標簽中添加額外的屬性
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
newTag: true // 添加其他參數
}
}
};
$('#pid').select2(option);
```
## **設置全局默認值**
>[info]$.fn.select2.defaults.set("key", "value")
```
$.fn.select2.defaults.set("theme", "classic");
$.fn.select2.defaults.set("ajax--cache", false);
//重置全局默認值
$.fn.select2.defaults.reset();
```
## **默認值之選項的data-xx**
格式 `data-*`
```
$(".js-example-data-ajax").select2({
ajax: {
url: "http://example.org/api/test",
cache: false
}
});
//上面轉化為data-xx格式:
<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true">
...
</select>
```
## **啟用多選**
multiple="multiple",寫在html里
```
<select id="sel_menu2" multiple="multiple" class="form-control">
//...
</select>
//多選
$("#sel_menu2").select2({
maximumSelectionLength: 3 //最多能夠選擇的個數
multiple: true//默認選中一個option
});
```
## **禁用select**
~~~
$(".js-example-disabled").prop("disabled", true);
~~~
## **創建新選項**
```
var newdata = {
id: 1,
text: 'Barn owl'
};
/** 添加新的選項并選中
* 第一個參數:option文本
* 第二個參數:option值
* 第三個參數:true時給此option添加selected屬性
* 第四個參數:將此option設置為默認選中狀態
* @type {Option}
*/
var newOption = new Option(newdata .text, newdata .id, false, true);
$('#pid').append(newOption).trigger('change');//追加新選項并通知組件
```
## **搜索框中輸入的文本動態創建新option(標記)`tags: true`**
```
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
$(".js-example-tags").select2({
tags: true
});
```
### 文本框輸入后默認回車鍵觸發創建標簽(選中的option稱為標簽),我們也可以用`tokenSeparators`改成其他的
~~~
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
~~~
### 您可以通過createTag在新創建的標簽中添加額外的屬性
```
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
newTag: true // 添加其他參數
}
}
```
### **標簽創建的限制**
如何控制創建一個新標簽,返回null則不創建
```
$('select').select2({
createTag: function (params) {
// 如果沒有 @符號,則不創建標簽
if (params.term.indexOf('@') === -1) {
// 返回null到禁用標簽創建
return null;
}
return {
id: params.term,
text: params.term
}
}
});
```
## **默認值與動態更改選中項**
```
$('#pid').val('HI'); // 將option值為'HI'的項變為選中項
$('#pid').trigger('change'); //通知任何JS組件,該值已更改
或者
$('#pid').select2('val', '2');
```
### **多選時默認值**
```
/*多選時選擇多個項*/
$('#pid').val(['1', 'HI']);
$('#pid').trigger('change');
//例子2:
$('.js-example-theme-single').val(['1']).trigger('change');//這個就是select2的賦值方式。而val里的就是option的value
//多選
var arr = ['1','2','3'\];
$('#select1').val(arr).trigger('change');
```
[select2 ajax 設置默認值,初始值](https://blog.51cto.com/u_15353042/3750574)
### **ajax遠程更改選中項**
```
// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// 創建一個新的選項并追加到select2中
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// 手動觸發 `select2:select` 事件
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
```
## **取消選中項**
```
$('#mySelect2').val(null).trigger('change');
```
## **label**
```
<label for="id_label_single">
單擊此按鈕可聚焦單選元素
<select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
</label>
```

## **設置select2寬度**
```
<select class="js-example-responsive" style="width: 50%"></select>
```
或者
~~~
$(".js-example-responsive").select2({
width: '50%'
});
~~~
## **option分組(分層)**
黑色加粗則是option不可選擇的分組名
```
<select class="select2 form-control" id="pid" name="pid">
<optgroup label="阿拉斯加/夏威夷時區">
<option value="AK">阿拉斯加州</option>
<option value="HI">夏威夷</option>
</optgroup>
<option value="157">xxxx</option>
<option value="158">xxxx</option>
</select>
```

利用# optgroup進行折疊展開
## **更改主題**
~~~
$(".js-example-theme-single").select2({
theme: "classic"//默認default
});
~~~
default默認效果

classi經典效果(以文本框樣式顯示)

## **數據源**
### select2數據格式
results數據時必須的,pagination可省略
```
{
"results": [
{
"id": 1,
"text": "Option 1",
"selected":false,
"disabled": true,
},
{
"id": 2,
"text": "Option 2"
}
],
"pagination": {
"more": true//是否分頁
}
}
```
開啟分頁時需要在ajax請求時傳遞分頁參數
```
$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
}
}
});
```
分組數據
```
{
"results": [
{
"text": "Group 1",
"children" : [
{
"id": 1,
"text": "Option 1.1"
},
{
"id": 2,
"text": "Option 1.2"
}
]
},
{
"text": "Group 2",
"children" : [
{
"id": 3,
"text": "Option 2.1"
},
{
"id": 4,
"text": "Option 2.2"
}
]
}
],
"pagination": {
"more": true
}
}
```
下面一般時服務器返回的(可以的話服務器推薦返回上面格式的數據)
```
[{
"id":1,
"text":'xxxoo',
"selected":false,
"disabled": true,
//"element":{},
//"_resultId":"select2-e-result-xxoo-1"
},{
//...
}]
```
分組格式
```
[
{
"text": "Group 1",
"children": [
{
"id": 1,
"text": "Option 1.1",
"selected":false,
"disabled": true,
},
{
"id": 2,
"text": "Option 1.2"
}
]
},
{
//...
}
]
```
返回的數據需要轉換下才能被selec2識別如ajax
```
$('#mySelect2').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
// 需要將返回的數據轉為results
return {
results: data.items
};
}
}
});
```
### 數組
~~~
var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
~~~
## **獲取數據**
### **獲取選擇的內容**
方法1:
```
$('#mySelect2').select2('data');
// 獲取數據例子
$(".btn").on("click", function () {
var getData = $("#e").select2("data");
for(var i=0; i<getData.length; i++){
console.log(getData[i]);
console.log(getData[i].text);
}
console.log(JSON.stringify(getData));
}
```
方法2:
```
$('#mySelect2').find(':selected');
```
### **獲取/設置選中項的自定義屬性值**
```
$('#mySelect2').select2({
//選中option項時觸發templateSelection方法
templateSelection: function (data, container) {
// 添加自定義屬性
$(data.element).attr('data-custom-attribute', data.customValue);
return data.text;
}
});
// 獲取第一個選定元素的自定義屬性值
$('#mySelect2').find(':selected').data('custom-attribute');
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.0/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-4.6.0/dist/css/bootstrap.css">
<script src="select2-4.0.11/dist/js/select2.full.min.js"></script>
<link rel="stylesheet" href="select2-4.0.11/dist/css/select2.min.css">
</head>
<body>
<select name="" id="sel">
<option value="">請選擇</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<button class="btn btn-dark">獲得數據</button>
</body>
<script>
function formatRepoSelection(repo) { return repo.text }
function formatRepo(repo) { return repo.text }
$("#sel").select2({
ajax: {
url: "data.json",
dataType: "json",
delay: 250,
data: function (params) {
return { q: params.term };//params.term表示輸入框中內容,q發送到服務器的參數名;
},
processResults: function (data) {
return { results: data };
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
templateResult: formatRepo,
templateSelection: formatRepoSelection,
width: "300px",
placeholder: '請選擇',
allowClear: true
})
$(".btn").click(function () {
var res = $("#sel").select2("data")[0]; // 單選
var reslist = $("#sel").select2("data"); // 多選
console.log(res);
console.log(reslist);
})
</script>
</html>
//遠程json數據格式
[
{"id": 1, "text": "enhancement"},
{"id": 2, "text": "bug"},
{"id": 2, "text": "invalid"}
]
```
1. q: params.term 查詢參數(params.term表示輸入框中內容,q發生到服務器的參數名;所以這里你可以添加自定義參數,如:stype:'person')
2. processResults中results: data返回數據(返回最終數據給results,如果我的數據在data.res下,則返回data.res。這個與服務器返回json有關)
3. minimumInputLength 最小需要輸入多少個字符才進行查詢,與之相關的maximumSelectionLength表示最大輸入限制。
4. escapeMarkup字符轉義處理
5. templateResult返回結果回調 function formatRepo(repo){return repo.text},這樣就可以將返回結果的的text顯示到下拉框里,當然你可以return repo.text+"1";等
6. templateSelection選中項回調function formatRepoSelection(repo){return repo.text}
7. 關于返回的 json的格式:select2默認json格式為[{id:1,text:'text'},{id:2,text:'text'}],新版嚴格要求這樣的格式,當然你可以添加列,如:[{id:1,text:'text',name:'liu'}]
## **搜索matcher**
### **禁用搜索框**
minimumResultsForSearch:Infinity或者minimumResultsForSearch:-1
```
$("#xxx").select2({
minimumResultsForSearch: -1
});
```
### **相關參數**
```
minimumResultsForSearch: Infinity,//隱藏搜索框
minimumInputLength: 3,//僅當用戶輸入3個或更多字符時才開始搜索
maximumInputLength: 20,//只允許多達20個字符
minimumResultsForSearch: 20,//必須顯示至少20個結果
matcher:function(params,data){
//處理自定義搜索匹配
//如果沒有搜索詞,返回所有數據
if ($.trim(params.term) === '') {
return data;
}
// 如果沒有"text"屬性,就不要顯示該項目
if (typeof data.text === 'undefined') {
return null;
}
// `params.term` 用于搜索的詞
// `data.text` 是為數據對象顯示的文本
if (data.text.indexOf(params.term) > -1) {
//如果搜索的詞params.term在data中
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
// 您可以從這里返回修改后的對象
// 這包括在嵌套數據集中匹配所需的“children”
return modifiedData;
}
// 如果不應該顯示出來則返回null
return null;
},
```
對于多選框禁用對多選框的搜索需要在打開或關閉下拉列表時將屬性設置為`disabled`:true
~~~
$('#js-example-basic-hide-search-multi').select2();
$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
var $searchfield = $(this).parent().find('.select2-search__field');
$searchfield.prop('disabled', true);
});
~~~
## 文本占位符
**僅對于單選**,為了顯示占位符值,控件中的第一個選項必須為空白。這是因為默認情況下,瀏覽器會嘗試選擇第一個選項。如果第一個選項不為空,瀏覽器將顯示此選項而不是占位符
```
<select class="js-example-placeholder-single js-states form-control">
<option></option>
</select>
$(".js-example-placeholder-single").select2({
placeholder: "Select a state",
allowClear: true
});
```
多選占位符不能有空白
```
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
$(".js-example-placeholder-multiple").select2({
placeholder: "Select a state"
});
```
默認選擇占位符
```
$('select').select2({
placeholder: {
id: '-1', // option的值
text: 'Select an option'
}
});
```
**在單選模式下**使用 Select2 時,占位符選項將通過回調傳遞(如果已指定)自定義占位符外觀
```
$('select').select2({
templateSelection: function (data) {
if (data.id === '') { // adjust for custom placeholder values
return 'Custom styled placeholder text';
}
return data.text;
}
});
```
## 打開下拉列表
```
$('#mySelect2').select2('open');
```
## 關閉下拉列表
```
$('#mySelect2').select2('close');
```
## 檢查插件是否已初始化
```
if ($('#mySelect2').hasClass("select2-hidden-accessible")) {
// Select2 has been initialized
}
```
### 事件解除綁定
銷毀 Select2 控件時,Select2 將僅解除插件自動綁定的事件的綁定。在自己的代碼中綁定的任何事件(**包括顯式綁定的任何[Select2 事件](https://select2.org/programmatic-control/events))** 都需要使用 jQuery 方法手動取消綁定:`.off`
```
// 設置Select2控件
$('#example').select2();
// 綁定事件
$('#example').on('select2:select', function (e) {
console.log('select event');
});
// 銷毀Select2
$('#example').select2('destroy');
// 解除綁定事件
$('#example').off('select2:select');
```
## **事件**
當使用組件執行不同操作時,Select2 將觸發幾個不同的事件,從而允許您添加自定義掛鉤并執行操作。您也可以使用 在 Select2 控件上手動觸發這些事件。`.trigger`
### **偵聽事件**
```
$('#mySelect2').on('select2:select', function (e) {
// Do something
var data = e.params.data;//e.params.data將返回包含已選擇的option的對象,格式:{ "id": 1, "text": "Tyto alba", "genus": "Tyto", "species": "alba" }
});
```
### **觸發事件**
trigger手動觸發 Select2 控件上的事件,如果要將一些數據傳遞給事件的任何處理程序,則需要構造一個新的[jQuery`Event`對象](http://api.jquery.com/category/events/event-object/)并在該對象上觸發
```
var data = {
"id": 1,
"text": "Tyto alba",
"genus": "Tyto",
"species": "alba"
};
$('#mySelect2').trigger({
type: 'select2:select',
params: {
data: data
}
});
```
### 限制事件的范圍
```
$('#mySelect2').val('US'); // 更改值或對內部狀態進行一些更改
$('#mySelect2').trigger('change.select2'); // 僅通知 Select2 更改
```
| 事件 | 描述 |
| --- | --- |
| `change` | 每當選擇或刪除某個選項時觸發。 |
| `change.select2` | 的作用域版本 。有關更多詳細信息[,請參閱下文](https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event)。`change` |
| `select2:closing` | 在下拉列表關閉之前觸發。可以防止此事件。 |
| `select2:close` | 每當下拉列表關閉時觸發。 在此之前被觸發,并且可以防止。`select2:closing` |
| `select2:opening` | 在下拉列表打開之前觸發。可以防止此事件。 |
| `select2:open` | 每當下拉列表打開時觸發。 在此之前被觸發,并且可以防止。`select2:opening` |
| `select2:selecting` | 在選擇結果之前觸發。可以防止此事件。 |
| `select2:select` | 每當選擇結果時觸發。 在此之前被觸發,并且可以防止。`select2:selecting` |
| `select2:unselecting` | 在刪除所選內容之前觸發。可以防止此事件。 |
| `select2:unselect` | 每當刪除所選內容時觸發。 在此之前被觸發,并且可以防止。`select2:unselecting` |
| `select2:clearing` | 在清除所有選擇之前觸發。可以防止此事件。 |
| `select2:clear` | 每當清除所有選擇時觸發。 在此之前被觸發,并且可以防止。`select2:clearing` |
- php更新內容
- PHP PSR 標準規范
- 輔助查詢(*)
- 實用小函數
- composer項目的創建
- composer安裝及設置
- composer自動加載講解
- phpsdudy的composer操作
- 更換compoer鏡像源
- 下載包與刪除包
- git
- 安裝以及配置公鑰
- 手動添加Git Bash Here到右鍵菜單
- 第一次使用git要配置github遠程倉庫
- 代碼上傳到gitee
- Git代碼同時上傳到GitHub和Gitee(碼云)
- Git - 多人協同開發利器,團隊協作流程規范與注意事項
- 刪除遠程倉庫的文件
- github查詢方法
- 錯誤
- git clean
- 解決github release下載慢的問題
- 其他
- php.ini
- 緩沖函數ob_start()
- php配置可修改范圍
- php超時
- 防跨目錄設置
- 函數可變參數
- 匿名函數(閉包函數:closures)
- PHP CLI模式開發(命令行開發)
- 【時間】操作
- 常用時間函數
- 時間函數例子
- Date/Time 函數(不包含別名函數)
- DateTime類別名函數
- 【數字】及【數學】操作
- 【字符串】操作
- 常見用法
- 【數組】操作
- 排序
- 合并與累加案例
- 重組
- foreach引用傳值注意點
- 判斷數組a是否完全屬于數組b
- 數組指針操作
- 【正則】
- php正則函數
- 特殊符號
- 模式修正符
- 去除文本中的html、xml的標簽
- \r\n
- 分組
- 斷言(環視?)
- 條件表達式
- 遞歸表達式 (?R)
- 固化分組
- 正則例子
- 提取類文件的公共方法
- 抓取網頁內容
- 匹配中文字符
- 提取sql日志文件
- 框架
- xpath匹配
- 【文件】操作
- 自動加載spl_autoload_register
- 文件加載
- 文件的上傳
- 將字節轉為人可讀的單位
- 文件上傳相關設置
- 常見的mimi類型
- 文件斷點續傳
- 文件下載(防盜鏈+大文件+斷點續傳)
- 破解防盜鏈
- 即時通訊與php網絡相關(websocket,workman,swoole,curl)
- 網絡編程基本概念
- socket套接字和streams流
- socket
- 使用websocket實現php消息實時推送完整示例
- streams
- Stream函數實現websocket
- swoole+Workman筆記
- Workman相關
- 啟動停止
- Worker
- Connection
- TcpConnection
- AsyncTcpConnection類
- UdpConnection
- AsyncUdpConnection
- Timer
- Autoloader
- 協議(Protocols)
- Http服務
- 響應Response
- session會話
- session管理
- SSE(服務端推送技術)
- websocket
- tcp
- udp
- 其它
- text
- frame
- unix domain
- 定制協議
- workerman協程(workerman>=5.1.0,php>=8.2)
- wokerman實例
- workerman實現微信公眾號帶參數二維碼掃碼識別用戶
- 服務端和客戶端
- workerman其它實例
- Work類
- 設置transport開啟ssl,websocket+ssl即wss
- 多端口(多協議)監聽
- 詳細用法
- 全局的eventloop
- Timer定時器類
- pipeTCP代理
- 事件循環
- workman示例
- 使用workerman實現基于UDP的異步SIP服務器,服務器端可主動發送UDP數據給客戶端
- swoole相關
- 安裝及常用Cli操作
- TCP
- 4種回調函數的寫法
- easyswoole
- 目錄結構
- 配置文件
- swoole
- curl封裝
- curl參數
- php支持的協議和封裝協議(如http,php://input)
- php://協議
- file://協議
- http(s)://協議
- ftp(s)://協議
- zip://, bzip2://, zlib://協議
- data://協議
- glob://協議
- expect://協議
- phar://
- ssh2
- rar://
- ogg://
- 上下文(Context)選項和參數(用于所有的文件系統或數據流封裝協議)
- 過濾器
- http請求及模擬登錄
- 常用的header頭部定義匯總
- HTTP響應頭和請求頭信息對照表
- HTTP請求的返回值含義說明
- content-type對照表
- Cache-Control對照
- curl函數
- 防止頁面刷新
- telnet模擬get、post請求
- 三種方式模擬表單發布留言
- 模擬登陸
- 防盜鏈
- php+mysql模擬隊列發送郵件
- WebSocket JavaScript API
- 進程/線程/協程
- 協程
- 什么是協程
- web通訊(輪詢、長連接、websocket)
- 輪詢(Event Loop)
- WebSocket
- socket.io(對 WebSocket 的封裝)
- 郵件發送
- PHPMailer
- 短信驗證碼
- 短信寶
- 阿里云短信(新版)
- 短信API
- 原版
- 異常處理
- 顯示全部錯誤
- 異常分類
- php系統異常
- 錯誤級別
- set_error_handler
- set_exception_handler
- register_shutdown_function
- try catch
- tp5異常處理類解析
- 字符串中的變量解析
- url與文件路徑
- empty、isset、is_null
- echo 輸出bool值
- if真假情況
- 流程控制代替語法【if (條件): endif;】
- 三元運算
- 運算符優先級
- 常量
- define與const(php5.3) 類常量
- 遞歸
- 單元測試
- 面向對象
- 對象(object) 與 數組(array) 的轉換
- 全局變量域超全局變量
- 超全局變量
- $_ENV :存儲了一些系統的環境變量
- $_COOKIE
- $_SESSION
- $_FILES
- $_SERVER
- 無限分類
- 圖片操作
- 視頻分段加載
- 隱藏地址
- MPEG DASH視頻分片技術
- phpDoc注釋
- @錯誤抑制符
- 字符編碼
- CGI、FastCGI和PHP-FPM關系圖解
- No input file specified的解決方法
- SAPI(PHP常見的四種運行模式)
- assert斷言
- 程序執行
- 引用&
- Heredoc和Nowdoc語法
- 可變數量的參數(php5.6)
- 移動端判斷函數
- PHP分批次處理數據
- 類基礎
- 系統預定義類
- pdo
- 類的三大特性:封裝,繼承,多態
- 魔術方法
- extends繼承
- abstract 抽象類
- interface 接口(需要implements實現)
- 抽象類和接口的區別
- 多態
- static
- final
- serialize與unserialize
- instanceof 判斷后代子類
- 類型約束
- clone克隆
- ::的用法
- static::class、self::class
- new self()與new static()
- this、self、static、parent、super
- self、static、parent:后期靜態綁定
- PHP的靜態變量
- php導入
- trait
- 動態調用類方法
- 參數及類型申明
- 方法的重載覆蓋
- return $a && $b
- 類型聲明
- 設計思想
- 思路流程
- 六大原則(單里依賴迪米開接口)
- 單一職責原則(SRP)
- 里氏替換原則(LSP)
- 依賴倒置原則(DIP)
- 接口隔離原則(ISP)
- 迪米特法則(LoD)
- 開閉原則(OCP)
- 依賴注入與依賴倒置
- MVC模式與模板引擎
- 模版引擎
- smarty模版
- 系統變量、全局變量
- 語言切換
- 函數-給函數默認值
- 流程控制-遍歷
- 模版加載
- 模版繼承
- blade
- twig
- Plates
- 創建型模式(創建類對象)--單原二廠建
- (*)單例模式(保證一個類僅有一個實例)
- (*)工廠模式(自動實例化想要的類)
- 原型模式(在指定方法里克隆this)
- 創建者模式(建造者類組裝近似類屬性,購物車)
- 結構型模式 --橋(幫)組享外帶裝適
- 適配器模式(Adapter 用于接口兼容)
- 橋接模式(方法相同的不同類之間的快速切換)
- 裝飾模式(動態增加類對象的功能 如游戲角色的裝備)
- 組合模式(用于生成類似DOMDocument這種節點類,或者游戲相關)
- 外觀模式(門面(Facade)模式 不同類的統一調用)
- 享元模式
- 代理模式(委托模式)
- 行為型模式--觀摩職命狀-備爹在房中潔廁
- (*)觀察者模式(例如插件)
- 模板方法模式 Template
- 職責鏈模式 (Chainof Responsibility)
- 命令模式(Command)
- 狀態模式(State)
- (*)迭代器模式(Iterator)
- 已知模式-備忘錄模式(Memento)
- 深度模式-訪問者模式(Visitor)
- 中介者模式(Mediator)
- 深度模式-解釋器模式(Interpreter)
- 策略模式(Strategy)
- (*)注冊樹(注射器、注冊表、數據中心)模式
- 【函數參考】及【擴展列表】
- PHP擴展庫列表
- 影響 PHP 行為的擴展
- APC擴展(過時)
- APCu擴展
- APD擴展(過時)
- bcompiler擴展(過時)
- BLENC擴展 (代碼加密 實驗型)
- Componere擴展(7.1+)
- Componere\Definition
- Componere\Patch
- Componere \ Method
- Componere\Value
- Componere函數
- 錯誤處理擴展(PHP 核心)
- FFI擴展
- 基本FFI用法
- FFI api
- htscanner擴展
- inclued擴展
- Memtrack擴展
- OPcache擴展(5.5.0內部集成)
- Output Control擴展(核心)
- PHP Options/Info擴展(核心)
- 選項、 信息函數
- phpdbg擴展(5.6+內部集成)
- runkit擴展
- runkit7擴展
- scream擴展
- uopz擴展
- Weakref擴展
- WeakRef
- WeakMap
- WinCache擴展
- Xhprof擴展
- Yac(7.0+)
- 音頻格式操作
- ID3
- KTaglib
- oggvorbis
- OpenAL
- 身份認證服務
- KADM5
- Radius
- 針對命令行的擴展
- Ncurses(暫無人維護)
- Newt(暫無人維護)
- Readline
- 壓縮與歸檔擴展
- Bzip2
- LZF
- Phar
- Rar
- Zip
- Zlib
- 信用卡處理
- 加密擴展
- Crack(停止維護)
- CSPRNG(核心)
- Hash擴展(4.2內置默認開啟、7.4核心)
- Mcrypt(7.2移除)
- Mhash(過時)
- OpenSSL(*)
- 密碼散列算法(核心)
- Sodium(+)
- 數據庫擴展
- 數據庫抽象層
- DBA
- dbx
- ODBC
- PDO(*)
- 針對各數據庫系統對應的擴展
- CUBRID
- DB++(實驗性)
- dBase
- filePro
- Firebird/InterBase
- FrontBase
- IBM DB2
- Informix
- Ingres
- MaxDB
- Mongo(MongoDB老版本)
- MongoDB
- mSQL
- Mssql
- MySQL
- OCI8(Oracle OCI8)
- Paradox
- PostgreSQL
- SQLite
- SQLite3
- SQLSRV(SQL Server)
- Sybase
- tokyo_tyrant
- 日期與時間相關擴展
- Calendar
- 日期/時間(核心)
- HRTime(*)
- 文件系統相關擴展
- Direct IO
- 目錄(核心)
- Fileinfo(內置)
- 文件系統(核心)
- Inotify
- Mimetype(過時)
- Phdfs
- Proctitle
- xattr
- xdiff
- 國際化與字符編碼支持
- Enchant
- FriBiDi
- Gender
- Gettext
- iconv(內置默認開啟)
- intl
- 多字節字符串(mbstring)
- Pspell
- Recode(將要過時)
- 圖像生成和處理
- Cairo
- Exif
- GD(內置)
- Gmagick
- ImageMagick
- 郵件相關擴展
- Cyrus
- IMAP
- Mail(核心)
- Mailparse
- vpopmail(實驗性 )
- 數學擴展
- BC Math
- GMP
- Lapack
- Math(核心)
- Statistics
- Trader
- 非文本內容的 MIME 輸出(PDF、excel等文件操作)
- FDF
- GnuPG
- haru(實驗性)
- Ming(實驗性)
- wkhtmltox(*)
- PS
- RPM Reader(停止維護)
- RpmInfo
- XLSWriter Excel大文件讀取寫入操作(*)
- php第三方庫非擴展
- 進程控制擴展
- Eio
- Ev
- Expect
- Libevent
- PCNTL
- POSIX
- 程序執行擴展(核心)
- parallel
- pthreads(*)
- pht
- Semaphore
- Shared Memory
- Sync
- 其它基本擴展
- FANN
- GeoIP(*)
- JSON(內置)
- Judy
- Lua
- LuaSandbox
- Misc(核心)
- Parsekit
- SeasLog(-)
- SPL(核心)
- SPL Types(實驗性)
- Streams(核心)
- stream_wrapper_register
- stream_register_wrapper(同上別名)
- stream_context_create
- stream_socket_client
- stream_socket_server
- stream_socket_accept
- stream_socket_recvfrom
- stream_socket_sendto
- Swoole(*)
- Tidy擴展
- Tokenizer
- URLs(核心)
- V8js(*)
- Yaml
- Yaf
- Yaconf(核心)
- Taint(檢測xss字符串等)
- Data Structures
- Igbinary(7.0+)
- 其它服務
- 網絡(核心)
- Sockets
- socket_create
- socket_bind(服務端即用于監聽的套接字)
- socket_listen(服務端)
- socket_accept(服務端)
- socket_connect(客戶端)
- socket_read
- socket_recv(類似socket_read)
- socket_write
- socket_send
- socket_close
- socket_select
- socket_getpeername
- socket_getsockname
- socket_get_option
- socket_getopt(socket_get_option的別名)
- socket_set_option
- socket_setopt( socket_set_option的別名)
- socket_recvfrom
- socket_sendto
- socket_addrinfo_bind
- socket_addrinfo_connect
- socket_addrinfo_explain
- socket_addrinfo_lookup
- socket_clear_error
- socket_last_error
- socket_strerror
- socket_cmsg_space
- socket_create_listen
- socket_create_pair
- socket_export_stream
- socket_import_stream
- socket_recvmsg
- socket_sendmsg
- socket_set_block
- socket_set_nonblock
- socket_shutdown
- socket_wsaprotocol_info_export
- socket_wsaprotocol_info_import
- socket_wsaprotocol_info_release
- cURL(*)
- curl_setopt
- Event(*)
- chdb
- FAM
- FTP
- Gearman
- Gopher
- Gupnp
- Hyperwave API(過時)
- LDAP(+)
- Memcache
- Memcached(+)
- mqseries
- RRD
- SAM(消息隊列,沒有維護)
- ScoutAPM
- SNMP
- SSH2
- Stomp
- SVM
- SVN(試驗性的)
- TCP擴展
- Varnish
- YAZ
- YP/NIS
- 0MQ(ZeroMQ、ZMQ)消息系統
- 0mq例子
- ZooKeeper
- 搜索引擎擴展
- mnoGoSearch
- Solr
- Sphinx
- Swish(實驗性)
- 針對服務器的擴展
- Apache
- FastCGI 進程管理器
- IIS
- NSAPI
- Session 擴展
- Msession
- Sessions
- Session PgSQL
- 文本處理
- BBCode
- CommonMark(markdown解析)
- cmark函數
- cmark類
- Parser
- CQL
- IVisitor接口
- Node基類與接口
- Document
- Heading(#)
- Paragraph
- BlockQuote
- BulletList
- OrderedList
- Item
- Text
- Strong
- Emphasis
- ThematicBreak
- SoftBreak
- LineBreak
- Code
- CodeBlock
- HTMLBlock
- HTMLInline
- Image
- Link
- CustomBlock
- CustomInline
- Parle
- 類函數
- PCRE( 核心)
- POSIX Regex
- ssdeep
- 字符串(核心)
- 變量與類型相關擴展
- 數組(核心)
- 類/對象(核心)
- Classkit(未維護)
- Ctype
- Filter擴展
- 過濾器函數
- 函數處理(核心)
- quickhash擴展
- 反射擴展(核心)
- Variable handling(核心)
- Web 服務
- OAuth
- api
- 例子:
- SCA(實驗性)
- SOAP
- Yar
- XML-RPC(實驗性)
- Windows 專用擴展
- COM
- 額外補充:Wscript
- win32service
- win32ps(停止更新且被移除)
- XML 操作(也可以是html)
- libxml(內置 默認開啟)
- DOM(內置,默認開啟)
- xml介紹
- 擴展類與函數
- DOMNode
- DOMDocument(最重要)
- DOMAttr
- DOMCharacterData
- DOMText(文本節點)
- DOMCdataSection
- DOMComment(節點注釋)
- DOMDocumentFragment
- DOMDocumentType
- DOMElement
- DOMEntity
- DOMEntityReference
- DOMNotation
- DOMProcessingInstruction
- DOMXPath
- DOMException
- DOMImplementation
- DOMNamedNodeMap
- DOMNodeList
- SimpleXML(內置,5.12+默認開啟)
- XMLReader(5.1+內置默認開啟 用于處理大型XML文檔)
- XMLWriter(5.1+內置默認開啟 處理大型XML文檔)
- SDO(停止維護)
- SDO-DAS-Relational(試驗性的)
- SDO DAS XML
- WDDX
- XMLDiff
- XML 解析器(Expat 解析器 默認開啟)
- XSL(內置)
- 圖形用戶界面(GUI) 擴展
- UI
- PHP SPL(PHP 標準庫)
- 數據結構
- SplDoublyLinkedList(雙向鏈表)
- SplStack(棧 先進后出)
- SplQueue(隊列)
- SplHeap(堆)
- SplMaxHeap(最大堆)
- SplMinHeap(最小堆)
- SplPriorityQueue(堆之優先隊列)
- SplFixedArray(陣列【數組】)
- SplObjectStorage(映射【對象存儲】)
- 迭代器
- ArrayIterator
- RecursiveArrayIterator(支持遞歸)
- DirectoryIterator類
- FilesystemIterator
- GlobIterator
- RecursiveDirectoryIterator
- EmptyIterator
- IteratorIterator
- AppendIterator
- CachingIterator
- RecursiveCachingIterator
- FilterIterator(遍歷并過濾出不想要的值)
- CallbackFilterIterator
- RecursiveCallbackFilterIterator
- RecursiveFilterIterator
- ParentIterator
- RegexIterator
- RecursiveRegexIterator
- InfiniteIterator
- LimitIterator
- NoRewindIterator
- MultipleIterator
- RecursiveIteratorIterator
- RecursiveTreeIterator
- 文件處理
- SplFileInfo
- SplFileObject
- SplTempFileObject
- 接口 interface
- Countable
- OuterIterator
- RecursiveIterator
- SeekableIterator
- 異常
- 各種類及接口
- SplSubject
- SplObserver
- ArrayObject(將數組作為對象操作)
- SPL 函數
- 預定義接口
- Traversable(遍歷)接口
- Iterator(迭代器)接口
- IteratorAggregate(聚合式迭代器)接口
- ArrayAccess(數組式訪問)接口
- Serializable 序列化接口
- JsonSerializable
- Closure 匿名函數(閉包)類
- Generator生成器類
- 生成器(php5.5+)
- yield
- 反射
- 一、反射(reflection)類
- 二、Reflector 接口
- ReflectionClass 類報告了一個類的有關信息。
- ReflectionObject 類報告了一個對象(object)的相關信息。
- ReflectionFunctionAbstract
- ReflectionMethod 類報告了一個方法的有關信息
- ReflectionFunction 類報告了一個函數的有關信息。
- ReflectionParameter 獲取函數或方法參數的相關信息
- ReflectionProperty 類報告了類的屬性的相關信息。
- ReflectionClassConstant類報告有關類常量的信息。
- ReflectionZendExtension 類返回Zend擴展相關信息
- ReflectionExtension 報告了一個擴展(extension)的有關信息。
- 三、ReflectionGenerator類用于獲取生成器的信息
- 四、ReflectionType 類用于獲取函數、類方法的參數或者返回值的類型。
- 五、反射的應用場景
- phpRedis
- API
- API詳細
- redis DB 概念:
- 通用命令:rawCommand
- Connection
- Server
- List
- Set
- Zset
- Hash
- string
- Keys
- 事物
- 發布訂閱
- 流streams
- Geocoding 地理位置
- lua腳本
- Introspection 自我檢測
- biMap
- 原生
- php-redis 操作類 封裝
- redis 隊列解決秒殺解決超賣:
- Linux+Nginx
- 前置
- linux
- 開源網站鏡像及修改yum源
- 下載linux
- Liunx中安裝PHP7.4 的三種方法(Centos8)
- yum安裝
- 源碼編譯安裝
- LNMP一鍵安裝
- 寶塔安裝(推薦)
- 查看linux版本號
- 設置全局環境變量
- 查看php.ini必須存放的位置
- 防火墻與端口開放
- nohup 后臺運行命令
- linux 查看nginx,php-fpm運行用戶及用戶組
- 網絡配置
- CentOS中執行yum update時報錯
- 關閉防火墻
- 查看端口是否被占用
- 查看文件夾大小
- route命令
- nginx相關
- 一個典型的nginx配置
- nginx關于多個項目的配置(易于管理)
- nginx.config配置文件的結構
- 1、events
- 2、http
- server1
- location1
- location2
- server2
- location1
- location2
- nginx的location配置詳解
- Nginx相關命令
- Nginx安裝
- 正向,反向代理
- aaa
- phpstudy的nginx的配置
- 配置偽靜態
- Nginx 重寫規則
- 為靜態配置例子
- apache
- nginx
- pathinfo模式
- Shell腳本
- bash
- shell 語言中 0 代表 true,0 以外的值代表 false。
- 變量
- shell字符串
- shell數組
- shell注釋
- 向Shell腳內傳遞參數
- 運算符
- 顯示命令執行結果
- printf
- test 命令
- 流程控制與循環
- if
- case
- for
- while
- until
- break和continue
- select 結構
- shell函數
- shell函數的全局變量和局部變量
- 將shell輸出寫入文件中(輸出重定向)
- Shell腳本中調用另一個Shell腳本的三種方式
- 定時任務
- PHP實現定時任務的五種方法
- 寶塔
- 偽靜態以及去掉tp的index.php
- 數據據遠程訪問
- openresty
- 優化
- ab壓力測試
- PHP優化及注意事項
- 緩存
- opcache
- memcache
- php操作
- 數據庫
- 配置
- 數據庫鎖機制
- 主從分布
- 數據庫設計
- 邏輯設計
- 物理設計
- 字段類型的選擇
- 筆記
- SET FOREIGN_KEY_CHECKS
- 字符集與亂碼
- SQL插入 去除重復記錄的實現
- 5.7+嚴格模式會導致設置notnull的字段沒有值時報錯
- 分區表
- nginx 主從配置
- nginx 負載均衡的配置
- 手動搭建Redis集群和MySQL主從同步(非Docker)
- Redis Cluster集群
- mysql主從同步
- 軟件選擇
- url重寫
- 大流量高并發解決方案
- 【前端、移動端】
- html5
- meta標簽
- flex布局
- 居中
- 顯示、隱藏與禁用
- html5示例
- 瀑布流布局
- 移動端虛擬鍵盤會將position:fixed的元素頂到虛擬鍵盤的上面
- 使用div實現table效果
- javascript
- 移動端相關
- 緩存讀取與寫入
- 其他用法
- Javascript系統對象
- 原生javascript總結
- 節點操作
- 實用函數
- jquery
- jquery的extend插件制作
- 錯誤解決方案
- 選擇器
- 查找與過濾
- parent,parents,parentsUntil,offsetParent
- children
- siblings
- find
- next,nextAll,nextUntil
- prev,prevAll,prevUntil
- closest
- 過濾
- ajax
- pajax入門
- 精細分類
- 事件
- on事件無效:
- jquery自定義事件
- 表單操作
- 通用
- select
- checkbox
- radio
- js正則相關
- js中判斷某字符串含有某字符出現的次數
- js匹配指定字符
- $.getjson方法配合在url上傳遞callback=?參數,實現跨域
- jquery的兼容
- jquery的連續調用:
- $ 和 jQuery 及 $() 的區別
- 頁面響應順序及$(function(){})等使用
- 匿名函數:
- jquery的prop與attr的區別和與data()的聯系
- 默認值問題
- 拼接當前頁面的url
- dom加載
- ES6中如何導入和導出模塊
- ES6函數寫法
- 事件
- 手動觸發事件
- 移動端常用事件之touch觸摸事件
- 懸浮標簽遮擋導致該位置的標簽事件失效
- addEventListener
- new Function()
- 字符串操作
- 數組與對象操作
- Array
- 對象操作
- 數組對象復制斷掉引用的方法!
- 數組的 交集 差集 補集 并集
- js數組與對象的【遍歷與其他操作】
- js數組的map()方法操作json數組
- 獲取js對象所有方法
- form
- js:select
- phantomjs
- js精確計算CalcEval 【價格計算】 浮點計算
- js精確計算2
- 模板替換
- input賦值
- JS的數據儲存格式
- 可編輯區域與事件監聽
- if為false的情況
- 阻止冒泡
- jq滾動到底部自動加載數據實例
- if(a,b,c){}
- 播放mp3
- bootstrap
- bootstrap3
- class速查
- 常見data屬性
- data-toggle與data-target的作用
- botstrap4(自帶輪播)
- 布局
- 頁面內容
- botstrap4組件
- Collapse點擊折疊
- bootstrapTable
- 表選項(html屬性格式)
- 表選項2(js的json格式)
- 工具欄以及搜索框
- 本地化選項
- column列表選項
- 示例
- 行的詳細視圖
- 常用整理模板例子
- 數據格式(json)
- 用法(row:行,column:列)
- 頁腳使用footerFormatter做統計列功能
- 示例2
- JQuery-Jquery的TreeGrid插件
- 服務器端分頁
- 合并單元格1
- 合并單元格2
- 合并單元格3
- 合并單元格4
- 合并單元格5(插件)
- 列求和
- 添加行,修改行、擴展行數據
- bootstrap-table 怎么自定義搜索按鈕實現點擊按鈕進行查詢
- 添加序號
- bootstraptable的checkbox
- 動態添加列、動態添加行、單元格點擊橫向、豎向統計
- 記住分頁checkbox
- 精簡示例
- 擴展
- 組件
- 開源庫cdn
- layer
- bootstrap-treeview與ztree
- Uploader上傳組件
- jquery.form.js
- query.waypoints.min.js
- jquery.countup.js
- wow.min.js
- swiper.min.js
- 滑動select選擇器
- wcPop.js
- waterfall
- overlayScrollbars 滾動條監聽與美化
- Summernote 編輯器
- Tempusdominus 日期選擇器
- daterangepicker 日期時間范圍選擇
- moment 日期處理js類庫
- select2
- CitySelect
- vidbg基于jQuery全屏背景視頻插件
- jquery.pjax.js 頁面跳轉時局部刷新
- 基于jquery的旋轉圖片驗證碼
- highcharts圖表
- echarts圖表
- 個版本變化
- 復制刀粘貼板
- photoswipe 相冊組件
- fullPage.js 全屏滾動插件
- jQuery.loadScroll 滾動時動態加載圖像
- jquery.nouislider 范圍滑塊
- Zepto:移動端的jquery庫
- waterfall瀑布流插件
- mustache.js與Handlebars.js
- mobile select
- makdow編輯器
- toastr:輕量級的消息提示插件
- datatables
- 會員 數據庫表設計
- 開發總結
- API接口
- API接口設計
- json轉化
- app接口
- 企查查接口
- 雜項
- 開源項目
- PhpSpreadsheet
- 實例
- 導入導出
- 導出多個工作薄
- 將excel數據插入數據庫
- 加載大文件
- phpoffice/phpspreadsheet
- PHPExcel
- 二維碼phpqrcode
- feixuekeji/PHPAnalysis 分詞
- http-crontab定時任務
- guzzle(HTTP客戶端)
- easywechat(overtrue/wechat)
- 三方插件庫
- 檢測移動設備(包括平板電腦)
- textalk\websocket
- 與谷歌瀏覽器交互
- 支付
- Crontab管理器
- PHP操作Excel
- 阿里云域名解析
- SSL證書
- sublime Emmet的快捷語法
- 免費翻譯接口
- 接口封裝
- 免費空間
- 架構師必須知道的26項PHP安全實踐
- 大佬博客
- 個人支付平臺
- RPC(遠程調用)及框架
- PHP中的數組分頁實現(非數據庫)
- 用安卓手機搭建 web 服務器
- 優惠券
- 抽獎算法
- 三級分銷
- 項目要求
- 權限設計
- ACL
- RBAC
- RBAC0
- RBAC1(角色上下級分層)
- RBAC2(用戶角色限約束)
- RBAC3(分層+約束)
- 例子
- Rbac.class.php
- Rbac2
- Auth.class.php
- fastadmin Auth
- tree1
- 數據表
- TP6auth拓展
- ABAC 基于屬性的訪問控制
- 總結:SAAS后臺權限設計案例分析
- casbin-權限管理框架
- 開始使用
- casbinAPI
- casbin管理API
- RBAC API
- Think-Casbin
- php修改session的保存方式
- 單點登錄(SSO)
- 例子1
- 例子2
- OAuth授權(用于第三方授權)
- OAuth 2.0 的四種方式
- 授權碼
- 隱藏式
- 密碼式
- 憑證式
- 更新令牌
- 例子:第三方登錄
- 微服務架構下的統一身份認證和授權
- 代碼審計
- 漏洞挖掘的思路
- 命令注入
- 代碼注入
- XSS 反射型漏洞
- XSS 存儲型漏洞
- xss過濾
- HTML Purifier文檔
- 開始
- id規則
- class規則
- 過濾分類
- Attr
- AutoFormat
- CSS
- Cache
- Core
- Filter
- html
- Output
- Test
- URI
- 其他
- 嵌入YouTube視頻
- 加快HTML凈化器的速度
- 字符集
- 定制
- Tidy
- URI過濾器
- 在線測試
- xss例子
- 本地包含與遠程包含
- sql注入
- 函數
- 注釋
- 步驟
- information_schema
- sql注入的分類
- 實戰
- 防御
- CSRF 跨站請求偽造
- 計動態函數執行與匿名函數執行
- unserialize反序列化漏洞
- 覆蓋變量漏洞
- 文件管理漏洞
- 文件上傳漏洞
- 跳過登錄
- URL編碼對照表
- XXE
- 第三方
- 對象存儲oss
- 阿里云
- 啟用mysql的sql日志