两个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 相关文章推荐
jQuery 选择器详解
Jan 19 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
vue实现循环切换动画
Oct 17 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
javascript Keycode对照表
2009/10/24 Javascript
js select常用操作控制代码
2010/03/16 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中的pack和unpack的使用
2018/03/12 Python
python gdal安装与简单使用
2019/08/01 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
民主生活会汇报材料
2014/12/15 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
卡特教练观后感
2015/06/08 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python