页面代码:

 <table border="0" cellpadding="0" cellspacing="0" style="width: 32%">
<tr>
<td>
<asp:ListBox ID="lbLeft" runat="server" Width="150px" Height="200" DataTextField="Name" DataValueField="ID" SelectionMode="Multiple"></asp:ListBox>
</td>
<td><input id="btnAll" onclick="SelectAll()" type="button" class="C_input02" value=">>" />
<br /><br />
<input id="btnAdd" onclick="SelectOne()" type="button" class="C_input02" value=">" /><br /><br />
<input id="btnDel" onclick="DelOne()" type="button" class="C_input02" value="<" /><br /><br />
<input id="btnDAll" onclick="DelAll()" type="button" class="C_input02" value="<<" />
</td>
<td>
<asp:ListBox ID="lbRight" runat="server" Width="150px" SelectionMode="Multiple" Height="200"></asp:ListBox>
</td>
</tr>
</table>
<input id="txtProvider" runat="server" style="display:none" />

javascript代码:

 <script type="text/javascript">
function SelectAll()
{
var lst1=window.document.getElementByIdx_x_x_x("<%=lbLeft.ClientID %>");
var length = lst1.options.length;
var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>")
for(var i=0;i<length;i++)
{
var v = lst1.options[i].value;
var t = lst1.options[i].text;
var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>");
lst2.options[i] = new Option(t,v,true,true);
string.value+=v+",";
}
} function DelAll()
{
var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>");
var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>")
var length = lst2.options.length;
for(var i=length;i>0;i--)
{
lst2.options[i-1].parentNode.removeChild(lst2.options[i-1]);
}
string.value = "";
} function SelectOne()
{
var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>")
var lst1=window.document.getElementByIdx_x_x_x("<%=lbLeft.ClientID %>");
var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>");
var lstindex=lst1.selectedIndex;
var length = lst2.options.length;
var isExists = false;
if(lstindex<0)
return;
else if(length != null)
{
for(var i=0;i < length; i++)
{
if(lst2.options[i].text == lst1[lstindex].text&&lst2.options[i].value == lst1[lstindex].value)
{
isExists = true;
}
}
}
else
{
return;
}
if (isExists == false)
{
var v = lst1.options[lstindex].value;
var t = lst1.options[lstindex].text;
lst2.options[lst2.options.length] = new Option(t,v,true,true);
string.value+=v+",";
}
else
{
alert("所选条目数据已经存在");
return false;
}
} function DelOne()
{
var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>");
var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>")
var lstindex=lst2.selectedIndex;
if(lstindex>=0)
{
var v = lst2.options[lstindex].value+";";
var va = lst2.options[lstindex].value+",";
lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
string.value = string.value.replace(va,"");
}
}
</script>

兼容IE、火狐

两个listbox 无刷新互动的更多相关文章

  1. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  2. ASP_NET实现界面无刷新的DropdownList两级联动效果

    所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...

  3. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  4. mvc file控件无刷新异步上传操作

    前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...

  5. 利用history实现无刷新跳转界面

    看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端), ...

  6. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  7. ajax 无刷新上传

    最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...

  8. 使用AjaxPro实现无刷新更新数据

    需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM ...

  9. asp.net Ajax刷新和无刷新的区别

    无刷新按钮btnShua 刷新按钮btnWu label控件和calendar控件在updatePanel中显示 两个button按钮在div中 <%@ Page Language=" ...

随机推荐

  1. 五种常见的ASP.NET应用程序安全缺陷

    下面给出了五个例子,阐述如何按照上述建议增强应用程序的安全性.这些例子示范了代码中可能出现的缺陷,以及它们带来的安全风险.如何改写最少的代码来有效地降低攻击风险.1 篡改参数◎ 使用ASP.NET域验 ...

  2. 使用DataReader

    string sqlStr="select * from tb_news"; SqlCommand myCmd=new SqlCommand(sqlStr,myConn); myC ...

  3. JS传递参数时对中文进行编码和解码

    var b ="啊,我要过去";                            var a = encodeURI(b);//对中文编码                   ...

  4. 《第一行代码》学习笔记16-碎片Fragment(1)

    1.碎片( Fragment):一种可以嵌入在活动当中的UI片段,能让程序更加合理和充分地利用大屏幕的空间,在平板上的应用广泛. 2.碎片同样包括布局,有自己的生命周期,甚至可理解成一个迷你型的活动. ...

  5. js 计算两个日期之间的周数

    //返回两个日期相差的周数 function WeeksBetw(date1, date2) { //这里的date1,date2都是Date对象 var d1 = new Date(date1); ...

  6. C语言中的结构体和C++中的结构体以及C++中类的区别

    c++中结构体可以定义一个函数 C中的结构体和C++中结构体的不同之处:在C中的结构体只能自定义数据类型,结构体中不允许有函数,而C++中的结构体可以加入成员函数. C++中的结构体和类的异同: 一. ...

  7. Apache配置多个监听端口和不同的网站目录的简单方法(转)

    转自http://www.waaqi.com/archives/707.html 由于开发的多项目,每个项目又要独立,要用根目录地址. 所以这时候我们需要配置多个不同目录的Apache,如果是外部网可 ...

  8. Oracle11.2.0.4 RAC安装文档

    1 环境配置 参考官方文档<Grid Infrastructure Installation Guide for Linux> 1.1 软件环境 操作系统: [root@howe1 ~]# ...

  9. iscroll源码初涉

    最近尝试做web app时候,用上了神器iScroll,鉴于功力尚浅,并没有完全用好神器,所以今天特意来认真学习! 翻开官网,目前的版本是5,但是相关的文章并不多,具体的文件版本是: iscroll. ...

  10. 【Nutch2.2.1基础教程之3】Nutch2.2.1配置文件

    nutch-site.xml 在nutch2.2.1中,有两份配置文件:nutch-default.xml与nutch-site.xml. 其中前者是nutch自带的默认属性,一般情况下不要修改. 如 ...