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