两个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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Convert Seconds To Hours
2007/06/16 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
会计出纳岗位职责
2013/12/25 职场文书
网络程序员自荐信
2014/01/25 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
大学生活动策划方案
2014/02/10 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电