两个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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
Js基础学习资料
Nov 23 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
React简单介绍
May 24 Javascript
JS随机密码生成算法
Sep 23 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
PHP4实际应用经验篇(1)
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
javascript实现yield的方法
2013/11/06 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
keras 多任务多loss实例
2020/06/22 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
PHP面试题大全
2015/10/16 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014年大学生工作总结
2014/11/20 职场文书
长江三峡导游词
2015/01/31 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2015年招生工作总结
2015/05/04 职场文书
校运会广播稿
2015/08/19 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python