两个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中几种常见排序算法小结
Feb 22 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
ADODB的数据库封包程序库
2006/12/31 PHP
php GeoIP的使用教程
2011/03/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python for i in range ()用法详解
2020/09/18 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
C#面试题
2016/05/06 面试题
五十岁生日宴会答谢词
2014/01/15 职场文书
任命书怎么写
2014/06/04 职场文书
参赛口号
2014/06/16 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年学校工作总结
2014/11/20 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
商业计划书之服装
2019/09/09 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python