Js完成ListBox内容的交互实例

原创 2007年10月15日 10:28:00


这几天在做一个关于大学排名的网站,其中遇到了上图中的问题,需向某个对象中添加新的学校群体,这就用到了
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,这样就可以调用了。
希望对大家有所帮助!  

ListBox的应用(左框中信息移至右框)

说明: 选中做左边LisaBox中的信息,可以多选,点击“添加”按钮,可将其信息移到右边的ListBox中,同时左边被选中的信息消失,同理,点击”移除“按钮右边的信息就会还原到左边 代码: 前台...
  • linlin2294592017
  • linlin2294592017
  • 2013年03月14日 19:48
  • 1536

ListBox 水平滚动条智能滚动的实现方法

1.  选菜单 Insert/New Class,设新创建类的名字为CMyListBox,其基类为CListBox,其它选项采用缺省值。单击OK,VC自动生成MyListBox.cpp和MyListB...
  • dearwind153
  • dearwind153
  • 2015年12月14日 22:23
  • 1438

WPF - ListBox显示任意内容

WFP是非常强大的。ListBox是一个很常用的控件,看了一下它的items属性,定义如下: public ItemCollection Items { get; } 这是一个collection...
  • zj510
  • zj510
  • 2013年03月02日 11:58
  • 5951

C++ LISTBOX控件常见用法(转)

1. 属性列表:     SelectionMode    组件中条目的选择类型,即多选(Multiple)、单选(Single)     Rows             列表框中显示总共多少行...
  • u012425536
  • u012425536
  • 2014年03月10日 08:54
  • 2080

MFC Listbox创建右键菜单详解

恩 ,大家好。我用的是VS2010,不会用CSDN的插入图片的方法,大家表喷我。 这几天在搞MFC,因为客户要求(TMD)所以只好搞一个右键菜单。这个在网上确实有许多的版本,但是大多语焉不详,所...
  • u013050589
  • u013050589
  • 2014年04月21日 16:41
  • 2328

WPF中ListBox的创建和多种绑定用法

本篇博文为翻译(http://www.c-sharpcorner.com/uploadfile/mahesh/listbox-in-wpf/),本篇博文主要介绍ListBox控件的创建和用法。 先从...
  • lanshengsheng2012
  • lanshengsheng2012
  • 2013年08月28日 16:51
  • 15430

listbox控件用法详解

1. 属性列表:     SelectionMode    组件中条目的选择类型,即多选(Multiple)、单选(Single)     Rows             列表框中显示总共多少行 ...
  • SMF0504
  • SMF0504
  • 2016年06月27日 12:33
  • 16715

Windows界面编程第八篇 listbox彩色显示隔行变色

本文配套程序下载地址为:http://download.csdn.net/detail/morewindows/5128660转载请标明出处,原文地址:http://blog.csdn.net/mor...
  • MoreWindows
  • MoreWindows
  • 2013年03月11日 09:52
  • 14157

【C#】窗体透明度、ListBox的增删改查

这两个都是C#窗体的基础内容,下面用一个简单的例子说明这个问题,注意ListBox不是ListView就好。 如下图: 有两个按钮可以调节窗体的透明度,而在上方,如果ListBox的项被选...
  • yongh701
  • yongh701
  • 2015年11月30日 21:01
  • 1652

Listbox列表中添加项目,判断重复项

不同的思路,写出代码的逻辑顺序也会不同,可能执行结果相同,但过程显示不一定相同。下面用一个对比性的例子来说明。    在Listbox中对项目是否重复,进行判定并添加。    方法有二: (一)先添加...
  • wangqingbo0829
  • wangqingbo0829
  • 2013年09月05日 22:09
  • 2641
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Js完成ListBox内容的交互实例
举报原因:
原因补充:

(最多只允许输入30个字)