前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >select2如何黏贴选择

select2如何黏贴选择

作者头像
johnhuster的分享
发布2022-03-29 14:00:43
1.1K0
发布2022-03-29 14:00:43
举报
文章被收录于专栏:johnhuster

有时在使用select2插件时会遇到这种需求:一次性选择一些数据,然后根据这些数据自动选择相关项,我也遇到了这种需求并实现,这里简单讲讲我的做法:

1.首先我修改了select2的源码,增加了一个方法paste并在AllowedMethod数组中添加自定义的方法

代码语言:javascript
复制
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方法中完成数据项的选择

代码语言:javascript
复制
//由于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
 });
 

通过上面代码,相信都已经明白了其中的原理

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/12/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档