领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

jquery select2插件动态搜索、多选,赋初始值的解决方案

nixiaole 2024-11-10 12:33:04 知识剖析 40 ℃

一、什么是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',[]);不然初始化不了

Tags:

最近发表
标签列表