使用javascript实现两个listbox中list的移动

80酷酷网    80kuku.com

  javascript效果图片:

说明:
1.ListBox为服务器端控件,list可以在服务器端初始化
2.Button可以为服务器端,也可以为客户端控件:
    如果为服务器端控件,需要在页面初始化的时候为其添加事件处理为: 

 

btn_updaddrel.Attributes.Add("OnClick","javascript:add();");
     如果为客户端控件,则在声明控件的时候指定事件处理:

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

3.事件处理 

<script language="Javascript">
function add()
{   
    var objres = document.getElementById("lb_updrestitems");
    var objsel = document.getElementById("lb_updselitems");
           
    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;           
}
 </script>

效果图片

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: