当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 两个select之间option的互相添加操作(jquery实现)

Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
使用JQUERY Tabs插件宿主IFRAMES
jquery 简短右键菜单 多浏览器兼容
JQery 渐变图片导航效果代码 漂亮
HTML node相关的一些资料整理
JavaScript与DropDownList 区别分析
20个非常棒的Jquery实用工具 国外文章
Firefox+FireBug使JQuery的学习更加轻松愉快
firefox firebug中文入门教程 脚本之家新年特别版
firefox插件Firebug的使用教程
javascript addLoadEvent函数说明
javascript getElementsByClassName 和js取地址栏参数
让firefox支持IE的一些方法的javascript扩展函数代码
javascript 多种搜索引擎集成的页面实现代码
Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox
javascript 模拟点击广告
javascript 精确获取样式属性(上)
javascript 精确获取样式属性(下)
javascript 精确获取页面元素的位置
javascript 可控式透明特效实现代码

Javascript 中的 两个select之间option的互相添加操作(jquery实现)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 181 ::
收藏到网摘: n/a

两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去. 自己写了一个很简单的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()+"]))"));
});
}
};

打包下载