首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>编程相关>JAVASCRIPT>javascript实现ListBox内容的交互实例
javascript实现ListBox内容的交互实例
来源: 发布时间:2007-10-15 发布人: 浏览: 人次   字体: [ ]  


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

相 关 文 章   发布商链接
·javascript使用xml数据岛的简单实例
·Javascript中判断润年简单的代码实...
·javascript实现多表头分类交叉报表代...
·javacript常用的验证方法小结
·Javascript在IE和FireFox中的不同...
·Javascript如何控制CheckBox的全选与...
·单选框单击出现相应的JS说明代码
·JavaScript将table中选择的数据导出...
·javascript实现类似IE7中的Tab效果
·js实现select 控件的option添加,移除...
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·javscript实现鼠标移到小图片
·如何在静态页面中利用javascr...
·javascript实现WEB页面导出为...
·如何在兼容IE和Firefox的情况
·javascript读取本地excel文档
·javascript实现页面自动刷新...
·javascript解决iframe框架页...
·javascript实现网易邮箱多附...
·javascript实现模仿IE自动完...
·javacript实现关闭子窗口,刷...
·javascript脚本实现右键弹出...
·javascript结合Ajax制作的可...
·javascript实现页面载入等待...
·javascript实现一个IP只弹窗...
·javascript导航条比较实用的...
热 门 文 章
·Ext2.0框架的Grid使用介绍祥...
·JS实现多行的HTML静态表格分...
·javascript实现多张图片轮流...
·javascript使用xml数据岛的简...
·Adobe Reader利用javascript...
·javascript读写TEXT文本文件...
·幻灯片焦点图片新闻显示调用f...
·javascript实现页面载入等待...
·实例讲解Ext Js生成动态树,...
·Javascript在IE和FireFox中的...
·javascript实现动态多附件上...
·javascript脚本实现右键弹出...
·鼠标右下角显示层,javascrip...
·javascript解析身份证号码得...
·javascript实现的网页软键盘...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .