`
fengpeng
  • 浏览: 99866 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS多项目选择脚本

脚本JavaScriptHTML 
阅读更多
代码
  1. <html>  
  2. <script language="javascript">  
  3.     function insertall(){   
  4.             var oDest=document.all.lstSelected;   
  5.             for (var i=0;i<document.all.personList.options.length;i++)   
  6.             {   
  7.                 var e=document.all.personList.options[i];   
  8.                 insert(oDest,e.innerText,e.value);   
  9.             }   
  10.             oDest=document.all.personList;   
  11.             removeAll(oDest);   
  12.    }   
  13.   
  14.   function removeAll(oSelect){   
  15.             for( i=oSelect.childNodes.length -1;i>=0;i--){   
  16.                 var node = oSelect.childNodes(i);   
  17.                 oSelect.removeChild(node);   
  18.               }   
  19.         }   
  20.            
  21.  function insert2(){   
  22.             var oDest=document.all.lstSelected;   
  23.             for (var i=0;i<document.all.personList.options.length;i++)   
  24.             {   
  25.                 var e=document.all.personList.options[i];   
  26.                 if (e.selected){   
  27.                     insert(oDest,e.innerText,e.value);   
  28.                 }   
  29.            }   
  30.            oDest=document.all.personList;   
  31.            removeSelected(oDest);   
  32.         }   
  33.            
  34.     function yichu2(){   
  35.             var oDest=document.all.personList;   
  36.             for (var i=0;i<document.all.lstSelected.options.length;i++)   
  37.             {   
  38.                 var e=document.all.lstSelected.options[i];   
  39.                 if (e.selected){   
  40.                     insert(oDest,e.innerText,e.value);   
  41.                 }            
  42.            }   
  43.             oDest=document.all.lstSelected;   
  44.             removeSelected(oDest);   
  45.         }   
  46.            
  47.     function quanyi2(){   
  48.             var oDest=document.all.personList;   
  49.             for (var i=0;i<document.all.lstSelected.options.length;i++)   
  50.             {   
  51.                 var e=document.all.lstSelected.options[i];   
  52.                 insert(oDest,e.innerText,e.value);   
  53.            
  54.             }   
  55.             oDest=document.all.lstSelected;   
  56.             removeAll(oDest);   
  57.         }   
  58.        
  59.     function insert(oDest,name, value){   
  60.                 var oNewNode = document.createElement("option");   
  61.                 oNewNode.innerText=name;   
  62.                 oNewNode.value = value;   
  63.                 addUniqueNode(oNewNode, oDest)   
  64.         }   
  65.        
  66.     function  addUniqueNode(node, oDest){   
  67.        var oNewNode = document.createElement("option");   
  68.        var nodeExist = false;   
  69.        for(y in oDest.children){   
  70.            if(node.value == oDest.children[y].value){   
  71.               nodeExist = true;   
  72.               break;   
  73.            }   
  74.        }   
  75.   
  76.        if(!nodeExist){   
  77.           var newNode = node.cloneNode(true);   
  78.           oDest.appendChild(newNode);   
  79.        }       
  80.     }   
  81.   
  82.     function removeSelected(oSelect){   
  83.         for( i=oSelect.childNodes.length -1;i>=0;i--){   
  84.             var node = oSelect.childNodes(i);   
  85.             if(node.selected){   
  86.               oSelect.removeChild(node);   
  87.             }   
  88.         }   
  89.     }   
  90. </script>  
  91. <body>  
  92. <table border="0">  
  93.               <tr>  
  94.                 <td>  
  95.                   <select name="personList" size="4" MULTIPLE style="width: 200px;height:100px">  
  96.                     <option value="1">中国广州</option>  
  97.                     <option value="2">中国上海</option>  
  98.                     <option value="3">中国北京</option>  
  99.                     <option value="4">中国武汉</option>            
  100.                   </select>  
  101.                 </td>  
  102.                <td width=50>  
  103.                <input name="add" type="button" onClick="insert2();" value="添 加">  
  104.                <input name="yichu" type="button" onClick="yichu2();" value="移 除">  
  105.                <input name="quanyi" type="button" onClick="quanyi2();"  value="全 移" >  
  106.                <input name="addall" type="button" onClick="insertall();" value="全 加">  
  107.                </td>  
  108.                  <td>  
  109.                   <select name="lstSelected" size="4" MULTIPLE style="width:200px;height:100px">  
  110.                   </select>  
  111.                 </td>  
  112.               </tr>    
  113.    </table>  
  114. </body>  
  115. </html>  
分享到：
| ToolTip用HTML实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics