两个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 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Angular实现响应式表单
Aug 04 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
vue多页面项目中路由使用history模式的方法
Sep 23 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原创论坛
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python调用命令行进度条的方法
2015/05/05 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
内业资料员岗位职责
2014/01/04 职场文书
部门2015年度工作总结
2015/04/29 职场文书
小学毕业感言200字
2015/07/30 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Golang 入门 之url 包
2022/05/04 Golang