ASP.NET应用JS完成ListBox内容的交互实例

ASP.NET应用JS完成ListBox内容的交互实例

2007-06-15     推荐:11181988    收藏:7235393    评论:2     来源: e800.net频道

• 
•   ASP.NET  
•   JS  
•   List  
•   实例  
•   ASP.  
•   内容  
•   NET  

运行效果如下： 　　这几天在做一个关于大学排名的网站，其中遇到了上图中的问题，需向某个对象中添加新的学校群体，这就用到了ListBox，而要进行两个ListBox之间的交互，无疑有两个办法：一个是在服务器端与客户端不停的PostBack，这无疑会大大降低效率。这是就体现出JavaScript在客户端的优势。下面介绍一下，又不足的地方希望大家指出！ 　　下面是JS代码：用四个函数分别对应四个按钮，完成该功能。 <script type="text/javascript"> function SelectAll() { var lst1=window.document.getElementById("<%=lb_Sourse.ClientID %>"); var length = lst1.options.length; var string = window.document.getElementById("<%=hf_NewName.ClientID %>") for(var i=0;i<length;i++) { var v = lst1.options[i].value; var t = lst1.options[i].text; var lst2=window.document.getElementById("<%=lb_NewName.ClientID %>"); lst2.options[i] = new Option(t,v,true,true); string.value+=v; } } function DelAll() { var lst2=window.document.getElementById("<%=lb_NewName.ClientID %>"); var length = lst2.options.length; for(var i=length;i>0;i--) { lst2.options[i-1].parentNode.removeChild(lst2.options[i-1]); } } function SelectOne() { var string = window.document.getElementById("<%=hf_NewName.ClientID %>") var lst1=window.document.getElementById("<%=lb_Sourse.ClientID %>"); var lst2=window.document.getElementById("<%=lb_NewName.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.getElementById("<%=lb_NewName.ClientID %>"); var lstindex=lst2.selectedIndex; if(lstindex>=0) { var v = lst2.options[lstindex].value+";"; lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]); } } </script> 　　需要解释的是由于JS脚本是在客户端执行的，因此服务器端控件是无法调用JS的，由于ID无法被找到，但用<%=lb_NewName.ClientID %>的方法就巧妙的解决得该问题，是asp控件拥有客户端id，这样就可以调用了。