【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+",";
      }
  }