本文共 3945 字，大约阅读时间需要 13 分钟。
最近项目中页面模板用到select2，需要动态搜索数据，显示下拉选，参考select2官网，大概写出来，代码如下
$("#select2-button-addons-single-input-group-sm").select2({ width: "off", placeholder: {id:"-1", text:"请输入域账户"}, ajax: { url: appRoot+"/getLdapUser.do", dataType: 'json', delay: 250, data: function(params) { return { userName: params.term, // search term page: params.page }; }, processResults: function(data) { // parse the results into the format expected by Select2. // since we are using custom formatting functions we do not need to // alter the remote JSON data var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象 var arr = data for(item in arr){ itemList.push({id: item, text: arr[item]}) } return { results: itemList }; }, cache: false }, escapeMarkup: function(markup) { return markup; },// let our custom formatter work minimumInputLength: 1, templateResult: formatTask, templateSelection: formatTaskSelection }); 其中两个参数：
templateResult: formatTask,templateSelection: formatTaskSelection
对应的两个方法要重写
function formatTask(userName) { if (userName.loading) return userName.text; var markup = " " +userName.text + " "; return markup; } function formatTaskSelection(userName) { return userName.text; } 这样写遇到问题：
在选择选项时总是选中一个选项，但是显示的是错误的选项，比如：我当前选中“北京”，下拉选第一个是“上海”，我选择上海，还是显示“北京”，搞了两天，最终找到问题所在，问题代码是如下几行：
var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象 var arr = data for(item in arr){ itemList.push({id: item, text: arr[item]}) } 因为select2判断选中必须要求数据格式为{id:0,text:'ANTS'}这样，通过id来判断选中项，如上面代码，第一次搜索，选中“北京”，遍历创建新格式的时候，“北京”对应id为0，那么id为0的选项为选中项，也就是“北京”。当我不刷新页面重新搜索“上海”的时候，又进行遍历创建新格式，这时候“上海”对应id也为0，这时候select2就认为id为0的选项是选中项，这时候虽然select显示北京，但是实际选中项为上海。
解决：
设置全局i，每次遍历设置id为i，再进行i++操作，这样id就不会重复，不会出现上面问题；
var i = 0; $("#select2-button-addons-single-input-group-sm").select2({ width: "off", placeholder: {id:"-1", text:"请输入域账户"}, ajax: { url: appRoot+"/getLdapUser.do", dataType: 'json', delay: 250, data: function(params) { return { userName: params.term, // search term page: params.page }; }, processResults: function(data) { // parse the results into the format expected by Select2. // since we are using custom formatting functions we do not need to // alter the remote JSON data var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象 var arr = data for(item in arr){ itemList.push({id: i, text: arr[item]}) i++; } return { results: itemList }; }, cache: false }, escapeMarkup: function(markup) { return markup; },// let our custom formatter work minimumInputLength: 1, templateResult: formatTask, templateSelection: formatTaskSelection }); 补充：
经测试，上面创建新格式，其中的id可以随意，不一定为数字，只要不是重复的就好，而且id是有其他用处的，如果提交表单，id值就是提交的select中option的value值，大家视自己情况修改id。
转载地址：http://vntbi.baihongyu.com/