logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 WindySky 2009-06-24

两个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. };  
 

测试页面(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="width: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="width: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="width: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="width: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="width: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="width: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>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： WindySky > 《常用特效》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多