设为首页 友情链接
在线留言 发表文章
加入收藏 广告联系

刺猬首页

| 专案技术 | 网络技术 | 图形图象 | 网络编程 | 网页设计 | 操作系统 | 服务器 | 技术白皮书 | 在线实验室 | 刺猬论坛 |
小说专版  | 数据库 | 设计赏析 | 存储频道 | 网络安全 | 私服架设 |  Solaris | 网站评估 | PC维护技巧 | 下载中心 | 博 客 |
专   题: | Linux | java | cisco | 防病毒 | 刀片 | SOA | iscsi | ASP.NET | SQL | Oracle |
您现在的位置: 刺猬宫 >> 网络编程 >> ASP.NET >> 教程正文 用户登录 新用户注册
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
基础知识:认识ASP.NET的…
.NET技巧 如何实现ASP.N…
请慎用ASP.Net的validat…
初学解惑:关于ASP.NET技…
asp.net初学者:petshop…
技巧应用:ASP.Net中的M…
技巧实例:ASP.NET生成静…
ASP.NET 2.0的导航控件t…
绝对精华:ASP.NET常用的…
应用实例:ASP.Net中利用…
  ASP.NET应用技巧:JS完成ListBox内容的交互实例           
ASP.NET应用技巧:JS完成ListBox内容的交互实例
 

  运行效果如下:

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

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

  希望对大家有所帮助!

频道声明:本频道的文章除部分特别声明禁止转载的专稿外,可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。

原始作者:佚名 录入时间:2007-6-20 17:16:59
信息来源:不详 投稿信箱:itqoo@126.com
教程录入:itqoo    责任编辑:itqoo 
  • 上一个教程:

  • 下一个教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    - 关于我们 - 合作伙伴 - 友情链接 - 广告刊登 - 投稿热线 - 在线留言版权声明联系方式 -
    IT公社版权所有 粤ICP备05127012号
    Copyrigh@2005-2006 itqoo.com.Inc All Rights Reserved  推荐分辨率 1024*768
    联系站长:E-Mail:itqoo@126.com     MSN:urchincc@hotmail.com    QQ:点击这里给我发消息
    特别感谢:亿太网络提供空间支持