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

自己写了一个很简单的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()+"]))")); }); } };打包下载

　　推荐阅读

　　通过隐藏option实现select的联动效果

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>>>详细阅读

本文标题：两个select之间option的互相添加操作(jquery实现)

地址：http://www.17bianji.com/kaifa2/JS/27709.html

1/2 1