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