整理（select2的使用、事件、参数详解） javaweb

官方文档（推荐）： select2参数文档说明
参考博客： 1.使用 Select2下拉框总结
select2使用方法总结
Select2学习总结
老版本select2设置初始值
JS组件系列——Bootstrap Select2组件使用小结
2.事件 jquery插件select2的所有事件，包括清除，删除，打开等
3.参数详解 bootstrap select2 参数详解
select2 api参数的文档
样例（来自官方文档）

$("#e7").select2({ placeholder: "Search for a repository", minimumInputLength: 3, ajax: { url: "https://api.github.com/search/repositories", dataType: 'json', quietMillis: 250, data: function (term, page) { // page is the one-based page number tracked by Select2 return { q: term, //search term page: page // page number }; }, results: function (data, page) { var more = (page * 30) < data.total_count; // whether or not there are more results available // notice we return the value of more so Select2 knows if more results can be loaded return { results: data.items, more: more }; } }, formatResult: repoFormatResult, // omitted for brevity, see the source of this page formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results });

常用事件

// 改变事件 $("#e11").on("change", function(e) {}); // select2 打开事件 $("#e11").on("select2-open", function(e) {}); // select2 关闭事件 $("#e11").on("select2-close", function(e) {}); // 选中事件 $("#e11").on("select2-selecting", function(e) {}); // 移除完毕事件。配置allowClear: true后触发 $("#e11").on("select2-removed", function(e) {}); // 加载中事件 $("#e11").on("select2-loaded", function(e) {}); //获得焦点事件 $("#e11").on("select2-focus", function(e) {}); //失去焦点事件 $("#e11").on("select2-blur", function(e) {});

函数

// 获取选中的ID值 $("#e1").select2("val")); // id="CA" 选中（好像单个还不行，以数组形式才行） $("#e2").select2("val", "CA"); // 不选中任何值 $("#e2").select2("val", ""); // 获取选中的对象 $("#e2").select2("data"); //设置选中的值：id="CA",text="California" $("#e2").select2("data", {id: "CA", text: "California"}); // 获取选中JSON对象 JSON.stringify($("#e2").select2("data"))); //多选设值 $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]);

参数

templateResult : formatState, // 列表带图片 templateSelection : formatState, // 选中的带图片language: "zh-CN", //设置提示语言 width: "100%", //设置下拉框的宽度 placeholder: "请选择", // 空值提示内容，选项值为 null //placeholder: {id: '', text: "请选择"}, // 同上，这里默认空值为 '' minimumInputLength: 10,//最小需要输入多少个字符才进行查询 maximumInputLength:11, //最大输入长度 allowClear: true, //是否允许手动点击删除 tags: false,// 根据搜索框创建option，默认false selectOnClose: true, // 如果没有手动选中，下拉框消失后会自动选中被hover的选项（不建议使用） closeOnSelect: false, // 选择后下拉框不会关闭（单选-不建议使用） minimumResultsForSearch: Infinity, // 隐藏搜索框 theme: "classic", // 样式 separator: ",",// 分隔符 data: initdata,// 下拉框绑定的数据 multiple: true,// 多选，默认falsemaximumSelectionLength: 3,// 多选 - 设置最多可以选择多少项 tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项前提是：tags: true//加载远程数据参数 escapeMarkup: function (markup) { return markup; }, //template的html显示效果，否则输出代码 formatResult:repoFormatResult,// 自定义下拉选项的样式模板。返回结果回调function repoFormatResult(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里。也可以自定义返回结果样式 formatSelection:repoFormatSelectionl // 自定义选中选项的样式模板。选中项回调function repoFormatSelection(repo){return repo.text}

旧版本设置初始值：

//设置初始值 initSelection:function(element, callback) { var initData = https://www.it610.com/article/{id:'', text:'默认值'} callback(initData); },

样例补充

var selectCustomer; $(function(){ initSelectCustomer(); }); function initSelectCustomer(){ $("#e2").select2({ ajax: { url: "/electric/customer/autocomplete", dataType: 'json', quietMillis: 500, data: function (term, page) { return { mobilePhone: term, }; }, results: function (data, page) { //console.log(data); var list = new Array(); if(data && data.length >0 ){ $.each(data, function (i,e) { var obj = {}; obj.id = e.id; obj.text = e.mobilePhone; obj.username = e.name; list.push(obj); }); } //console.log(list); return { results: list}; }, cache:true }, initSelection:function(element, callback) { if (!selectCustomer) { selectCustomer = {id:'${account.customer.id}', text:'${account.customer.mobilePhone}'}; //console.log("customer:id="+selectCustomer.id+",phone="+selectCustomer.text); } callback(selectCustomer); }, placeholder: "输入手机号码", language:'zh-CN',//语言 maximumInputLength:11,//最大输入长度 minimumInputLength:4,//最小输入长度 width: 'resolve', allowClear: true,//选中之后，可手动点击删除 dropdownCssClass: "bigdrop", escapeMarkup: function (m) {return m; }, formatResult:repoFormatResult,// 自定义下拉选项的样式模板 formatSelection:repoFormatSelection // 自定义选中选项的样式模板 }); $("#e2").on("select2-close", function (e) { //关闭下拉框事件。获取选中的对象 selectCustomer = $("#e2").select2("data"); //console.log("customer:id="+selectCustomer.id+",phone="+selectCustomer.text); }); $("#e2").on("select2-removed", function (e) { //这里是取消选中触发的事件，配置allowClear: true后触发 $("#e2").val(''); $("#mobilePhone").val(''); //console.log("移除完毕。"); }); } function repoFormatResult(repo) { //console.log("repo:"+repo); var markup = '' + '' + '' + ''+ '' + repo.text + '' + ''; markup += ''; return markup; }function repoFormatSelection(repo) { //console.log("format:"+repo.id+",text:"+repo.text); $("#e2").val(repo.id); $("#mobilePhone").val(repo.text); return repo.text; }

【整理（select2的使用、事件、参数详解）】