关闭

JS多项目选择脚本

199人阅读 评论(0) 收藏 举报
  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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15696次
    • 积分:449
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档