两个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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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/06/18 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
php实现文件上传基本验证
2020/03/04 PHP
JavaScript版代码高亮
2006/06/26 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python学习小技巧总结
2018/06/10 Python
python实现dijkstra最短路由算法
2019/01/17 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python socket模块方法实现详解
2019/11/05 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Python同时处理多个异常的方法
2020/07/28 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
大学在校生求职信范文
2013/11/21 职场文书
公司董事长职责
2013/12/12 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
英文商务邀请函范文
2015/01/31 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Redis全局ID生成器的实现
2022/06/05 Redis