两个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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
jQuery动态添加
Apr 07 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 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中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
两只小狮子教学反思
2014/02/05 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
鲁冰花观后感
2015/06/10 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS