【Vegas原创】使用javascript实现两个listbox中的添加、删除

1.ListBox为服务器端控件，list可以在服务器端初始化

2.Button可以为服务器端，也可以为客户端控件：

   如果为服务器端控件，需要在页面初始化的时候为其添加事件处理为：

   btn_updaddrel.Attributes.Add( " OnClick " , " BLOCKED SCRIPTadd(); " );

   如果为客户端控件，则在声明控件的时候指定事件处理：

< INPUT  type ="button"  value ="ADD"  onclick  = "add()" >

      我的设置为：

     < table  height ="210"  width ="496"  align ="left"  border ="0" >
                             < tr >
                                 < td  width ="137"  rowSpan ="3" >
                                     < asp:listbox  id ="exc_zb"  runat ="server"  Height ="189px"  Width ="120px"  SelectionMode ="Multiple" ></ asp:listbox >
                                 </ td >
                                 < td  width ="112" >< INPUT  onclick ="add()"  type ="button"  value =" > > " ></ td >
                                 < td  width ="123"  rowSpan ="3" >< asp:listbox  id ="exc_zb2"  runat ="server"  Height ="200px"  Width ="100px" ></ asp:listbox ></ td >
                                 < td >< input  onclick ="clearall()"  type ="button"  value ="Clear All" ></ td >
                             </ tr >
                             < tr >
                                 < td  width ="112" >< input  onclick ="del()"  type ="button"  value =" < < " >   </ td >
                                 < td  rowSpan ="2" >< INPUT  id ="getlistvalue"  onclick ="getvalue()"  type ="text"  size ="20"  name ="getlistvalue" ></ td >
                             </ tr >
                         </ table >

3.事件处理

             //   remove zb
             function  add()
        { 
             var  objres  =  document.getElementById( " exc_zb " );
             var  objsel  =  document.getElementById( " exc_zb2 " );

             var  customOptions;
             for ( var  i  =  objres.options.length  -   1  ;i  >=   0 ;i -- )
            {
             if (objres.options[i].selected)
            {
            customOptions  =  document.createElement( " OPTION " );
            customOptions.text  =  objres.options[i].text;
            customOptions.value  =  objres.options[i].value;
            objsel.add(customOptions, 0 );
            objres.remove(i); 
            }
            }
             return   false ; 
        }
             //  delete zb
         function  del()
        {
         // alert (1);
         var  objdel = document.getElementById( " exc_zb2 " );
         var  objadd = document.getElementById( " exc_zb " );
         // alert (objdel.options.length);
         var  dellength = objdel.options.length;
         var  addleft;
             for  ( var  j = dellength - 1 ;j >= 0 ;j -- )
            {
                 if  (objdel.options[j].selected)
                {
                    addleft = document.createElement( " option " );
                    addleft.text = objdel.options[j].text;
                    addleft.value = objdel.options[j].value;
                    objadd.add(addleft, 0 );
                    objdel.remove(j);
                    
                }
            }
        }
         // clear zb all
         function  clearall()
        {
            var  objdel = document.getElementById( " exc_zb2 " );
         var  objadd = document.getElementById( " exc_zb " );
         var  dellength = objdel.options.length;
         var  addleft;
             for  ( var  j = dellength - 1 ;j >= 0 ;j -- )
            {
                
                    addleft = document.createElement( " option " );
                    addleft.text = objdel.options[j].text;
                    addleft.value = objdel.options[j].value;
                    objadd.add(addleft, 0 );
                    objdel.remove(j);
                    
                
            }

        }
  function  getvalue()
  {
  
          var  ListLength = document.getElementById( " exc_zb2 " ).options.length;
 
          var  ListValue;
          for  ( var  i = 0 ;i < ListLength;i ++ )
      {
  
          ListValue = document.getElementById( " exc_zb2 " ).options[i].value;
   
          document.getElementById( " getlistvalue " ).value += ListValue + " , " ;
      }
  }

转载于:https://www.cnblogs.com/amadeuslee/archive/2006/10/13/3744728.html