网站首页 > 知识剖析 正文
一、什么是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',[]);不然初始化不了
- 上一篇: jquery操作select按钮——取值,设置选中
- 下一篇: 实用的 jQuery下拉选择框插件集合
猜你喜欢
- 2024-11-10 详解jQuery(一) jqueryui
- 2024-11-10 web前端Jquery学习笔记一 jquery 前端
- 2024-11-10 select输入联想内容 selectinsert
- 2024-11-10 jquery为表单控件传值并提交表单 jquery提交表单调用serialize方法
- 2024-11-10 jQuery基本操作 jquery基础
- 2024-11-10 利用jQuery实现简单的数据双向绑定
- 2024-11-10 jQuery基础教程学习笔记(五)事件的绑定和解绑
- 2024-11-10 jQuery中的事件——事件绑定、合成事件
- 2024-11-10 前端开发培训JQuery标准教案 前端开发教学
- 2024-11-10 JS类库Jquery(二):优雅的使用JQuery写Ajax实现前后端完美交互
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)