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

两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去. 自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现. 插件源代码(listtolist.js): 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()+"]))")); • }); • } •}; /** 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()+"]))")); }); } }; 测试页面(listtolist.html) Html代码 •<html> •<head> • <mce:script src="jquery.js" mce_src="jquery.js"></mce:script> • <mce:script src="listtolist.js" mce_src="listtolist.js"></mce:script> • <mce:script type="text/javascript"><!-- • $(document).ready(function() { • $("#select1").dblclick(function() {$.listTolist("select1","select2","move",false);}); • $("#select2").dblclick(function() {$.listTolist("select2","select1","move",false);}); • $("#moveright").click(function() {$.listTolist("select1","select2","move",false);}); • $("#moverightall").click(function() {$.listTolist("select1","select2","move",true);}); • $("#moveleft").click(function() {$.listTolist("select2","select1","move",false);}); • $("#moveleftall").click(function() {$.listTolist("select2","select1","move",true);}); • • $("#select3").dblclick(function() {$.listTolist("select3","select4","append",false);}); • $("#select4").dblclick(function() {$.listTolist("select4","select3","append",false);}); • $("#appendright").click(function() {$.listTolist("select3","select4","append",false);}); • $("#appendrightall").click(function() {$.listTolist("select3","select4","append",true);}); • $("#appendleft").click(function() {$.listTolist("select4","select3","append",false);}); • $("#appendleftall").click(function() {$.listTolist("select4","select3","append",true);}); • • $("#select5").dblclick(function() {$.list2list("select5","select6",false);}); • $("#select6").dblclick(function() {$.list2list("select6","select5",false);}); • $("#transright").click(function() {$.list2list("select5","select6",false);}); • $("#transrightall").click(function() {$.list2list("select5","select6",true);}); • $("#transleft").click(function() {$.list2list("select6","select5",false);}); • $("#transleftall").click(function() {$.list2list("select6","select5",true);}); • }); • // --></mce:script> •</head> •<body> •<form action="#" method="post"> • <p>移动(move)测试:</p> • <label for="select1">select1</label> • <select id="select1" style="width:100px" size="5" multiple="true"> • <option value="1">number 1</option> • <option value="2">number 2</option> • <option value="3">number 3</option> • <option value="4">number 4</option> • <option value="5">number 5</option> • <option value="6">number 6</option> • <option value="7">number 7</option> • <option value="8">number 8</option> • <option value="9">number 9</option> • <option value="10">number 10</option> • <option value="11">number 11</option> • </select> • <label for="select2">select2</label> • <select id="select2" style="width:100px" size="5" multiple="true"> • <option value="4">number 4</option> • <option value="5">number 5</option> • <option value="6">number 6</option> • </select> • <br /> • <button id="moveright">右移</button> • <button id="moverightall">全部右移</button> • <button id="moveleft">左移</button> • <button id="moveleftall">全部左移</button> • <hr /> • <p>追加(append)测试:</p> • <label for="select3">select3</label> • <select id="select3" style="width:100px" size="5" multiple="true"> • <option value="1">number 1</option> • <option value="2">number 2</option> • <option value="3">number 3</option> • <option value="4">number 4</option> • <option value="5">number 5</option> • <option value="6">number 6</option> • <option value="7">number 7</option> • <option value="8">number 8</option> • <option value="9">number 9</option> • <option value="10">number 10</option> • <option value="11">number 11</option> • </select> • <label for="select4">select4</label> • <select id="select4" style="width:100px" size="5" multiple="true"> • <option value="4">number 4</option> • <option value="5">number 5</option> • <option value="6">number 6</option> • </select> • <br /> • <button id="appendright">右移</button> • <button id="appendrightall">全部右移</button> • <button id="appendleft">左移</button> • <button id="appendleftall">全部左移</button> • <hr /> • <p>list2list测试:</p> • <label for="select5">select5</label> • <select id="select5" style="width:100px" size="5" multiple="true"> • <option value="1">number 1</option> • <option value="2">number 2</option> • <option value="3">number 3</option> • <option value="4">number 4</option> • <option value="5">number 5</option> • <option value="6">number 6</option> • <option value="7">number 7</option> • <option value="8">number 8</option> • <option value="9">number 9</option> • <option value="10">number 10</option> • <option value="11">number 11</option> • </select> • <label for="select6">select6</label> • <select id="select6" style="width:100px" size="5" multiple="true"> • <option value="4">number 4</option> • <option value="5">number 5</option> • <option value="6">number 6</option> • </select> • <br /> • <button id="transright">右移</button> • <button id="transrightall">全部右移</button> • <button id="transleft">左移</button> • <button id="transleftall">全部左移</button> •</form> •</body> •</html>