两个select之间option的互相添加操作(jquery实现)


Posted in Javascript onNovember 12, 2009

自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现.
插件源代码(listtolist.js):

/** 
fromid:源list的id. 
toid:目标list的id. 
moveOrAppend参数("move"或者是"append"): 
move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加. 
append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加. isAll参数(true或者false):是否全部移动或添加 
*/ 
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) { 
    if(moveOrAppend.toLowerCase() == "move") {    //移动 
        if(isAll == true) {    //全部移动 
            $("#"+fromid+" option").each(function() { 
                //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作. 
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
            }); 
            $("#"+fromid).empty();    //清空源list 
        } 
        else if(isAll == false) { 
            $("#"+fromid+" option:selected").each(function() { 
                //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作. 
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
                //目标list中已经存在的option并没有移动,仍旧在源list中,将其清空. 
                if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) { 
                    $("#"+fromid).get(0) 
                    .removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0)); 
                } 
            }); 
        } 
    } 
    else if(moveOrAppend.toLowerCase() == "append") { 
        if(isAll == true) { 
            $("#"+fromid+" option").each(function() { 
                $("<option></option>") 
                .val($(this).val()) 
                .text($(this).text()) 
                .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
            }); 
        } 
        else if(isAll == false) { 
            $("#"+fromid+" option:selected").each(function() { 
                $("<option></option>") 
                .val($(this).val()) 
                .text($(this).text()) 
                .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
            }); 
        } 
    } 
}; 
/** 
功能大体同上("move"). 
不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除. 
isAll参数(true或者false):是否全部移动或添加 
*/ 
jQuery.list2list = function(fromid,toid,isAll) { 
    if(isAll == true) { 
        $("#"+fromid+" option").each(function() { 
            $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
        }); 
    } 
    else if(isAll == false) { 
        $("#"+fromid+" option:selected").each(function() { 
            $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))")); 
        }); 
    } 
};

打包下载
Javascript 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
Javascript 定时器调用传递参数的方法
Nov 12 #Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 #Javascript
JS解析XML的实现代码
Nov 12 #Javascript
跨域表单提交状态的变相判断代码
Nov 12 #Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python中如何获取类属性的列表
2016/12/26 Python
快速了解Python相对导入
2018/01/12 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
学校志愿者活动总结
2014/06/27 职场文书
超市周年庆活动方案
2014/08/16 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
党员个人总结自评
2015/02/14 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015年社区工作总结
2015/04/08 职场文书
军训新闻稿范文
2015/07/17 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Moment的feature导致线上bug解决分析
2022/09/23 Javascript