两个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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
Javascript变量函数浅析
Sep 02 Javascript
js事件(Event)知识整理
Oct 11 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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版自动生成文章摘要
2008/07/23 PHP
PHP 危险函数全解析
2009/09/09 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
详解Python中for循环是如何工作的
2017/06/30 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
单位门卫岗位职责
2013/12/20 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
经费申请报告范文
2015/05/18 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
Nginx快速入门教程
2021/03/31 Servers
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript