[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` |