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

2年前 (2022) 程序员胖胖胖虎阿

265 0 0

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

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

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

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

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

我的设置为：

<table height="210" width="496" align="left" border="0">
【Vegas原创】使用javascript实现两个listbox中的添加、删除

<tr>

<td width="137" rowSpan="3">
【Vegas原创】使用javascript实现两个listbox中的添加、删除

<asp:listbox id="exc_zb" runat="server" Height="189px" Width="120px" SelectionMode="Multiple"></asp:listbox>
【Vegas原创】使用javascript实现两个listbox中的添加、删除

</td>

<td width="112"><INPUT onclick="add()" type="button" value=" > > "></td>
【Vegas原创】使用javascript实现两个listbox中的添加、删除

<td width="123" rowSpan="3"><asp:listbox id="exc_zb2" runat="server" Height="200px" Width="100px"></asp:listbox></td>
【Vegas原创】使用javascript实现两个listbox中的添加、删除

<td><input onclick="clearall()" type="button" value="Clear All"></td>
【Vegas原创】使用javascript实现两个listbox中的添加、删除

</tr>

<tr>

<td width="112"><input onclick="del()" type="button" value=" < < "> </td>
【Vegas原创】使用javascript实现两个listbox中的添加、删除

<td rowSpan="2"><INPUT id="getlistvalue" onclick="getvalue()" type="text" size="20" name="getlistvalue"></td>
【Vegas原创】使用javascript实现两个listbox中的添加、删除

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