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,这样就可以调用了。
希望对大家有所帮助!  

js操作ListBox实现多项的添加和删除

//添加多个项到另一个ListBox中去function add(res,sel){ var objres=document.getElementById(res); var objsel=d...
  • bestchen_1
  • bestchen_1
  • 2009-09-09 12:44:00
  • 4114

js操作listbox

 选择人员或者部门或其他时,经常会用到2个listbox,下面这js代码,希望能给大家以及自己带来方便 function SelectAll()        ...{            var ...
  • EndPoint
  • EndPoint
  • 2007-10-25 11:06:00
  • 801

listbox控件用法详解

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

listbox控件的一些操作

1. 属性列表:    SelectionMode    组件中条目的选择类型,即多选(Multiple)、单选(Single)    Rows             列表框中显示总共多少行    ...
  • c_sharp_rookie
  • c_sharp_rookie
  • 2009-10-12 16:52:00
  • 2712

JS完成ListBox内容的交互实例

 这是我在网上找的一篇文章,但是我没有实现他的功能!望高手帮忙下,谢谢。。这几天在做一个关于大学排名的网站,其中遇到了上图中的问题,需向某个对象中添加新的学校群体,这就用到了ListBox,而要进行两...
  • bobo307135136
  • bobo307135136
  • 2008-10-26 22:05:00
  • 663

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

ASP.NET应用JS完成ListBox内容的交互实例2007-06-15     推荐:11181988    收藏:7235393    评论:2     来源:e800.net频道   ASP....
  • lsynb
  • lsynb
  • 2008-08-25 21:03:00
  • 816

asp.net控件全部清空、全部启用、全部禁用方法

#region//控件类 public class PubliClass { /// /// 清空控件内容 /// ...
  • zuoming120
  • zuoming120
  • 2012-01-31 14:47:36
  • 2361

ListBox,CheckedListBox,ComboBox控件的使用

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin...
  • dszgf5717
  • dszgf5717
  • 2013-07-21 11:43:29
  • 647

ListBox 在Javascript 中的使用

下面是一个完整的例子:    function dosall()    {        var i = 0;        var len = document.frmxx.dxry.options...
  • So_CooL
  • So_CooL
  • 2006-09-12 11:17:00
  • 3795

ListBox添加右键菜单并选择该项功能的实现

实现播放列表遇到的问题。废话不多说,简要说说实现的方法。 选中该位置是通过模拟点击鼠标左键来实现。即调用mouse_event()函数。 新建一个继承ListBox的类,添加ON_WM_RBUTTON...
  • uusad
  • uusad
  • 2010-03-12 23:37:00
  • 1391
收藏助手
不良信息举报
您举报文章:Js完成ListBox内容的交互实例
举报原因:
原因补充:

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