js 实现 将一个 ListBox 的项添加到另一个ListBox

这种方式处理后，服务器端得不到ListBox的数据，可放一个隐藏控件，将ListBox的值放在里面，服务器端取隐藏控件的值。

  1 <% @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="test.WEB_APP.WebForm4"  %>
  2
  3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  4
  5 < html  xmlns ="http://www.w3.org/1999/xhtml"   >
  6 < head  runat ="server" >
  7      < title > 无标题页 </ title >
  8      < script  language ="javascript"  type ="text/javascript" >
  9    var ObjFrom,ObjTo;
 10    function intial(objFrom,objTo)
 11    {
 12        ObjFrom = rtObject(objFrom);
 13        ObjTo = rtObject(objTo);
 14    }
 15    //返回ListBox对象
 16    function rtObject(obj)
 17    {
 18       return document.form1.elements[obj];
 19    }
 20    function AddItem(lbFrom,lbTo)
 21    {
 22        intial(lbFrom,lbTo);
 23        var fromCount = ObjFrom.options.length;
 24        if (fromCount==0)
 25        {
 26            alert("没有可供选择的数据");
 27            return;
 28        }
 29        for(var h=0;h<fromCount;h++)
 30        {
 31            if (ObjFrom.options[h].selected )
 32            {
 33                var selectValue = ObjFrom.options[h].value;
 34                var selectText = ObjFrom.options[h].text;  
 35                var toCount = ObjTo.options.length;
 36                var bool_ = false;
 37                for (k=0; k<toCount; k++ ) 
 38                {
 39                    if (ObjTo.options[k].value == selectValue)
 40                    { 
 41                         bool_ = true;
 42                         break;
 43                    }
 44                }
 45                if ( bool_ == false)
 46                {
 47                    ObjTo.options[toCount] = new Option(selectValue, selectText);
 48                    DeletSingle(ObjFrom,h);
 49                    break;
 50                }
 51            }
 52        }
 53    }
 54    function DelItem(lbTo,lbFrom)
 55    {
 56        intial(lbTo,lbFrom); 
 57        var minSelected=0; 
 58        for (var i=ObjFrom.length-1; i>=0; i--)
 59        { 
 60            if (ObjFrom.options[i].selected)
 61            {  
 62                if (minSelected==0 || i<minSelected)
 63                {    
 64                    minSelected=i;
 65                    AddItem(lbTo,lbFrom);
 66                    break;
 67                 }
 68            }
 69        }
 70        var i=ObjFrom.length;
 71        if (i>0) 
 72        {
 73            minSelected=i-1;
 74            ObjFrom.options[minSelected].selected=true;
 75        }
 76   }
 77    function AddItemAll(lbFrom,lbTo)
 78    {
 79        intial(lbFrom,lbTo);
 80        var fromCount = ObjFrom.options.length;
 81        if (fromCount==0)
 82            return;
 83        for(var h=0;h<fromCount;h++)
 84        {
 85            var code = ObjFrom.options[h].value;
 86            var value = ObjFrom.options[h].text;  
 87            var toCount = ObjTo.options.length;
 88            ObjTo.options[toCount] = new Option(value, code);
 89        }
 90        //删除所有项
 91        for(var h=fromCount;h>=0;h--)
 92        {
 93            DeletSingle(ObjFrom,h);
 94        }
 95    }
 96    //删除单个项
 97    function DeletSingle(obj,index)
 98    {    
 99        obj.options[index] = null;
100    }
101    //将选择的值放入隐藏控件
102    function getValues()
103    {
104        var ObjHid = document.getElementById('hidValue');
105        ObjHid.value = "";
106        var m = ObjTo.options.length;
107        for(var i = 0 ; i < m ; i++)
108        {
109            ObjHid.value += ObjTo.options[i].value+","
110        }
111        ObjHid.value = ObjHid.value.substring(0,ObjHid.value.lastIndexOf(","));
112        alert(ObjHid.value);
113    }
114     </ script >
115 </ head >
116 < body  id ="getValue" >
117      < form  id ="form1"  runat ="server" >
118      < div >
119             
120              < table >
121              < TR >
122              < TD  style ="WIDTH: 79px; height: 123px;" >
123              < asp:ListBox  ID ="lbMoveFrom"  runat ="server"  Height ="120px"  SelectionMode ="Multiple"
124             Width ="82px" >
125              < asp:ListItem > a </ asp:ListItem >
126              < asp:ListItem > b </ asp:ListItem >
127              < asp:ListItem > c </ asp:ListItem >
128              < asp:ListItem > d </ asp:ListItem >
129              < asp:ListItem > e </ asp:ListItem >
130              < asp:ListItem > f </ asp:ListItem >
131              < asp:ListItem > g </ asp:ListItem >
132              < asp:ListItem > h </ asp:ListItem >
133          </ asp:ListBox ></ TD >
134                      < TD  style ="WIDTH: 77px; height: 123px;"  align ="center" >
135                          < P >< INPUT  onclick ="JavaScript:AddItem('lbMoveFrom','lbMoveTo')"  tabIndex ="8"  type ="button"
136                                 value ="添  加>>"  name ="Input" ></ P >
137                          < P >< INPUT  onclick ="JavaScript:DelItem('lbMoveTo','lbMoveFrom')"  tabIndex ="9"  type ="button"
138                                 value ="<<移  出"  name ="Input2" ></ P >
139                          < P >< INPUT  type ="button"  onclick ="JavaScript:AddItemAll('lbMoveFrom','lbMoveTo')"  value ="全部添加>>" ></ P >
140                          < P >< FONT  face ="宋体" ></ FONT > &nbsp; </ P >
141                      </ TD >
142                      < TD  bgColor ="#ffffff"  style ="height: 123px" >
143          < asp:ListBox  ID ="lbMoveTo"  runat ="server"  Height ="123px"  SelectionMode ="Multiple"
144             Width ="74px" ></ asp:ListBox ></ TD >
145                  </ TR >
146              </ table >
147              </ div >
148          < input  id ="hidValue"  type ="hidden"   />
149          < input  id ="btn"  type ="button"  onclick ="getValues()"  value ="获取数据"   />
150      </ form >
151 </ body >
152 </ html >
153

转载于:https://www.cnblogs.com/doll-net/archive/2007/04/03/697940.html