select2如何黏贴选择
来源:互联网 发布:mysql notifier 关闭 编辑:程序博客网 时间:2024/04/30 15:43
有时在使用select2插件时会遇到这种需求:一次性选择一些数据,然后根据这些数据自动选择相关项,我也遇到了这种需求并实现,这里简单讲讲我的做法:
1.首先我修改了select2的源码,增加了一个方法paste并在AllowedMethod数组中添加自定义的方法
paste:function(items,selId){
var datas = this.opts.data;
var values=[];
var max = this.opts.maximumSelectionSize;
for(var i=0;i<datas.length && values.length<max;i++){
var data=datas[i];
for(var j=0;j<items.length;j++){
var item = items[j];
var text = data.text;
text = text.trim();
text = text.substring(0,text.length-1);
if(text == item){
var sel = {};
sel.text = data.text;
sel.id = data.id;
values.push(sel);
}
}
}
if(values.length >0){
$(selId).select2('data',values);
}
},
allowedMethods = ["findHighlightableChoices","paste","val", "destroy", "opened", "open", "close", "focus", "isFocused", "container", "dropdown", "onSortStart", "onSortEnd", "enable", "disable", "readonly", "positionDropdown", "data", "search","highlight"],
2.捕获paste事件,然后把粘贴板的数据经过处理后传给自定义的paste方法,在paste方法中完成数据项的选择
//由于select2重载了select元素,真正操作都是操作的select2插件创建的元素,笔者定义的select2元素id为multiple-import-orgId,s2id_multiple-import-orgId则是select2插件创建的select元素id
$("#s2id_multiple-import-orgId").on('paste',function(e){
//
var data;
if(window.clipboardData){
//IE浏览器
data = window.clipboardData.getData('Text')
}else{
//firefox,chrome浏览器
data = e.originalEvent.clipboardData.getData("text/plain");
}
var items = data.split('、',maxOrg); //其中、号为约定的选项间隔符
$(selId).select2('paste',items,selId); //selId为select2插件id
});
通过上面代码,相信都已经明白了其中的原理
- select2如何黏贴选择
- select2如何清除选择项
- select2默认选择值
- Select2 如何设置值?
- select2清空选择框
- select2没有默认选择项
- select2 选择框不能出现
- select2切换事件如何生效
- jquery select2设置选择的值
- select2 选择的内容不能显示问题
- 用select2做级联下拉选择
- select2
- select2
- select2
- select2
- select2
- js代码实现禁止选择文字复制黏贴
- 禁止在浏览器中选择和复制黏贴
- 如何用Eclipse将两个有Dependency的Maven Project关联起来
- 数据库集群技术漫谈
- 无法启动此程序,因为计算机中丢失MSVCR120D.dll。尝试重新安装该程序以解决此问题。
- vim
- 物联网串口在线更新语音的mp3语音芯片ic方案说明
- select2如何黏贴选择
- esp8266 SDK使用注意事项
- jsoup-Elements的遍历(使用Iterator迭代器)
- 最大子列和(递归、在线处理)——浙大数据结构(陈越)
- 蓝桥杯BASIC-2(01序列)
- Android滑动页面ViewPager的详细总结
- 加密芯片ATSHA204读序列号(Serial Number)
- Uri.parse与Uri.fromFile播放视屏
- [LeetCode]287. Find the Duplicate Number