一、什么是select2?

select2 是jquery一个下拉选择框插件，支持搜索、远程数据集以及其他高级功能。

图片来源网络

二、本文主要说明的功能点（以及低版本和高版本之间的区别）

1.如何设置select2多选

2.如何通过输入的关键词搜索服务器端的数据

3.如何初始化选中的值

三、解决方案及说明

1.设置select2多选

设置select2多选 只需要给select标签 添加multiple属性即可

2.如何通过输入的关键词搜索服务器端的数据（直接上代码，然后按照代码解释）

①.html 代码

低版本（我版本号的是3.5.1也只能用下面的input标签。不然会报错：Option ‘ajax' is not allowed for Select2 when attached to a <select> element。）： <input name="invitationsupplier" class=' itemSearch' id="selectsupplier" type='text' placeholder='输入公司名进行检索' />

高版本可以直接用select标签

<selectt class="select2" multiple id="selectsupplier"></selectt>

②.js代码

$("#selectsupplier").select2({ ajax: { type: 'post', url: url, dataType: 'json', delay: 250, data: function(term) { return { keyword: term }; }, results: function(data) { return { results: $.map(data.data.items, function(item) { return { text: item.companyname, id: item.id } }) }; }, cache: true }}).select2('val', []);

keyword: term //提交给后台查询的关键字

return { text: item.companyname, id: item.id } //绑定后台返回的JSON格式

3.如何初始化选中的值

 $("#selectsupplier").select2({ initSelection: function (element, callback) { var data = []; for (i = 0; i < invitationsupplieridsrr.length; i++) { data.push({id: invitationsupplieridsrr[i], text: invitationsuppliernamearr[i]}); } callback(data); }}).select2('val', []);

上面代码就不解释了一看就能明白，但是要注意的是结尾必须加上select2('val',[]);不然初始化不了