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

    两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.
    自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现.
    插件源代码(listtolist.js):

    Js代码
    1. /** 
    2. fromid:源list的id. 
    3. toid:目标list的id. 
    4. moveOrAppend参数("move"或者是"append"): 
    5. move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加. 
    6. append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加. 
    7.  
    8. isAll参数(true或者false):是否全部移动或添加 
    9. */  
    10. jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {  
    11.     if(moveOrAppend.toLowerCase() == "move") {  //移动  
    12.         if(isAll == true) { //全部移动  
    13.             $("#"+fromid+" option").each(function() {  
    14.                 //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.  
    15.                 $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));  
    16.             });  
    17.             $("#"+fromid).empty();  //清空源list  
    18.         }  
    19.         else if(isAll == false) {  
    20.             $("#"+fromid+" option:selected").each(function() {  
    21.                 //将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.  
    22.                 $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));  
    23.                 //目标list中已经存在的option并没有移动,仍旧在源list中,将其清空.  
    24.                 if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {  
    25.                     $("#"+fromid).get(0)  
    26.                     .removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));  
    27.                 }  
    28.             });  
    29.         }  
    30.     }  
    31.     else if(moveOrAppend.toLowerCase() == "append") {  
    32.         if(isAll == true) {  
    33.             $("#"+fromid+" option").each(function() {  
    34.                 $("<option></option>")  
    35.                 .val($(this).val())  
    36.                 .text($(this).text())  
    37.                 .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));  
    38.             });  
    39.         }  
    40.         else if(isAll == false) {  
    41.             $("#"+fromid+" option:selected").each(function() {  
    42.                 $("<option></option>")  
    43.                 .val($(this).val())  
    44.                 .text($(this).text())  
    45.                 .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));  
    46.             });  
    47.         }  
    48.     }  
    49. };  
    50. /** 
    51. 功能大体同上("move"). 
    52. 不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除. 
    53.  
    54. isAll参数(true或者false):是否全部移动或添加 
    55. */  
    56. jQuery.list2list = function(fromid,toid,isAll) {  
    57.     if(isAll == true) {  
    58.         $("#"+fromid+" option").each(function() {  
    59.             $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));  
    60.         });  
    61.     }  
    62.     else if(isAll == false) {  
    63.         $("#"+fromid+" option:selected").each(function() {  
    64.             $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));  
    65.         });  
    66.     }  
    67. };  
    /** 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代码
    1. <html>  
    2. <head>  
    3.     <script src="jquery.js"></script>  
    4.     <script src="listtolist.js"></script>  
    5.     <script type="text/javascript">  
    6.         $(document).ready(function() {  
    7.             $("#select1").dblclick(function() {$.listTolist("select1","select2","move",false);});  
    8.             $("#select2").dblclick(function() {$.listTolist("select2","select1","move",false);});  
    9.             $("#moveright").click(function() {$.listTolist("select1","select2","move",false);});  
    10.             $("#moverightall").click(function() {$.listTolist("select1","select2","move",true);});  
    11.             $("#moveleft").click(function() {$.listTolist("select2","select1","move",false);});  
    12.             $("#moveleftall").click(function() {$.listTolist("select2","select1","move",true);});  
    13.               
    14.             $("#select3").dblclick(function() {$.listTolist("select3","select4","append",false);});  
    15.             $("#select4").dblclick(function() {$.listTolist("select4","select3","append",false);});  
    16.             $("#appendright").click(function() {$.listTolist("select3","select4","append",false);});  
    17.             $("#appendrightall").click(function() {$.listTolist("select3","select4","append",true);});  
    18.             $("#appendleft").click(function() {$.listTolist("select4","select3","append",false);});  
    19.             $("#appendleftall").click(function() {$.listTolist("select4","select3","append",true);});  
    20.               
    21.             $("#select5").dblclick(function() {$.list2list("select5","select6",false);});  
    22.             $("#select6").dblclick(function() {$.list2list("select6","select5",false);});  
    23.             $("#transright").click(function() {$.list2list("select5","select6",false);});  
    24.             $("#transrightall").click(function() {$.list2list("select5","select6",true);});  
    25.             $("#transleft").click(function() {$.list2list("select6","select5",false);});  
    26.             $("#transleftall").click(function() {$.list2list("select6","select5",true);});  
    27.         });  
    28.     </script>  
    29. </head>  
    30. <body>  
    31. <form action="#" method="post">  
    32.     <p>移动(move)测试:</p>  
    33.     <label for="select1">select1</label>  
    34.     <select id="select1" style="100px" size="5" multiple="true">  
    35.         <option value="1">number 1</option>  
    36.         <option value="2">number 2</option>  
    37.         <option value="3">number 3</option>  
    38.         <option value="4">number 4</option>  
    39.         <option value="5">number 5</option>  
    40.         <option value="6">number 6</option>  
    41.         <option value="7">number 7</option>  
    42.         <option value="8">number 8</option>  
    43.         <option value="9">number 9</option>  
    44.         <option value="10">number 10</option>  
    45.         <option value="11">number 11</option>  
    46.     </select>  
    47.     <label for="select2">select2</label>  
    48.     <select id="select2" style="100px" size="5" multiple="true">  
    49.         <option value="4">number 4</option>  
    50.         <option value="5">number 5</option>  
    51.         <option value="6">number 6</option>  
    52.     </select>  
    53.     <br />  
    54.     <button id="moveright">右移</button>  
    55.     <button id="moverightall">全部右移</button>  
    56.     <button id="moveleft">左移</button>  
    57.     <button id="moveleftall">全部左移</button>  
    58.     <hr />  
    59.     <p>追加(append)测试:</p>  
    60.     <label for="select3">select3</label>  
    61.     <select id="select3" style="100px" size="5" multiple="true">  
    62.         <option value="1">number 1</option>  
    63.         <option value="2">number 2</option>  
    64.         <option value="3">number 3</option>  
    65.         <option value="4">number 4</option>  
    66.         <option value="5">number 5</option>  
    67.         <option value="6">number 6</option>  
    68.         <option value="7">number 7</option>  
    69.         <option value="8">number 8</option>  
    70.         <option value="9">number 9</option>  
    71.         <option value="10">number 10</option>  
    72.         <option value="11">number 11</option>  
    73.     </select>  
    74.     <label for="select4">select4</label>  
    75.     <select id="select4" style="100px" size="5" multiple="true">  
    76.         <option value="4">number 4</option>  
    77.         <option value="5">number 5</option>  
    78.         <option value="6">number 6</option>  
    79.     </select>  
    80.     <br />  
    81.     <button id="appendright">右移</button>  
    82.     <button id="appendrightall">全部右移</button>  
    83.     <button id="appendleft">左移</button>  
    84.     <button id="appendleftall">全部左移</button>  
    85.     <hr />  
    86.     <p>list2list测试:</p>  
    87.     <label for="select5">select5</label>  
    88.     <select id="select5" style="100px" size="5" multiple="true">  
    89.         <option value="1">number 1</option>  
    90.         <option value="2">number 2</option>  
    91.         <option value="3">number 3</option>  
    92.         <option value="4">number 4</option>  
    93.         <option value="5">number 5</option>  
    94.         <option value="6">number 6</option>  
    95.         <option value="7">number 7</option>  
    96.         <option value="8">number 8</option>  
    97.         <option value="9">number 9</option>  
    98.         <option value="10">number 10</option>  
    99.         <option value="11">number 11</option>  
    100.     </select>  
    101.     <label for="select6">select6</label>  
    102.     <select id="select6" style="100px" size="5" multiple="true">  
    103.         <option value="4">number 4</option>  
    104.         <option value="5">number 5</option>  
    105.         <option value="6">number 6</option>  
    106.     </select>  
    107.     <br />  
    108.     <button id="transright">右移</button>  
    109.     <button id="transrightall">全部右移</button>  
    110.     <button id="transleft">左移</button>  
    111.     <button id="transleftall">全部左移</button>  
    112. </form>  
    113. </body>  
    114. </html>  
    <html> <head> 	<script src="jquery.js"></script> 	<script src="listtolist.js"></script> 	<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);}); 		}); 	</script> </head> <body> <form action="#" method="post"> 	<p>移动(move)测试:</p> 	<label for="select1">select1</label> 	<select id="select1" style="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="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="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="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="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="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>
     
  • 相关阅读:
    java基础多线程
    java反射基础
    JSP-4(Session)
    JSP-3
    JSP-2
    复试计算机专业文献翻译
    jsp
    实现输入输出对应模型
    servlet
    tomcat的入门（1）
  • 原文地址：https://www.cnblogs.com/top5/p/1601675.html
Copyright © 2020-2023  润新知