这是我在网上找的一篇文章,但是我没有实现他的功能!望高手帮忙下,谢谢。。
这几天在做一个关于大学排名的网站,其中遇到了上图中的问题,需向某个对象中添加新的学校群体,这就用到了ListBox,而要进行两个ListBox之间的交互,无疑有两个办法:一个是在服务器端与客户端不停的PostBack,这无疑会大大降低效率。这是就体现出JavaScript在客户端的优势。下面介绍一下,又不足的地方希望大家指出!
下面是JS代码:用四个函数分别对应四个按钮,完成该功能。
需要解释的是由于JS脚本是在客户端执行的,因此服务器端控件是无法调用JS的,由于ID无法被找到,但用<%=lb_NewName.ClientID %>的方法就巧妙的解决得该问题,是asp控件拥有客户端id,这样就可以调用了。
- <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>