两个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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
浅谈Vue数据响应
Nov 05 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
基于mysql的bbs设计(一)
2006/10/09 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
简单JS代码压缩器
2006/10/12 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
BootStrap selectpicker
2016/06/20 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python正则抓取网易新闻的方法示例
2017/04/21 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
详解python3中tkinter知识点
2018/06/21 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python中print函数简单使用总结
2019/08/05 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
机械绘图员岗位职责
2013/11/19 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
个人优缺点总结
2015/02/28 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
win10搭建配置ftp服务器的方法
2022/08/05 Servers