两个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 表格内容排序 简单操作示例代码
Jan 03 Javascript
再谈javascript原型继承
Nov 10 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
vue配置多页面的实现方法
May 22 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
Vue组件为什么data必须是一个函数
Jun 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
星际原理概述
2020/03/04 星际争霸
十天学会php(3)
2006/10/09 PHP
php中文本操作的类
2007/03/17 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
学习ExtJS Column布局
2009/10/08 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python监控进程脚本
2018/04/12 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python中p-value的实现方式
2019/12/16 Python
Python sep参数使用方法详解
2020/02/12 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
便利店的创业计划书
2014/01/15 职场文书
运动会入场词200字
2014/02/15 职场文书
产品质量保证书
2014/04/29 职场文书
学校火灾防控方案
2014/06/09 职场文书
销售活动策划方案
2014/08/26 职场文书
法制教育主题班会
2015/08/13 职场文书
入党转正申请书范文
2019/05/20 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript