两个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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
QT与javascript交互数据的实现
May 26 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转成EXE文件
2006/10/09 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
php和html的区别点详细总结
2019/09/24 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
JavaScript的面向对象(一)
2006/11/09 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python 变量类型详解
2018/10/10 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python安装scipy的步骤解析
2019/09/28 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python3 re返回形式总结
2020/11/20 Python
python openssl模块安装及用法
2020/12/06 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
护士自我推荐信范文
2015/03/24 职场文书