Js完成ListBox内容的交互实例


这几天在做一个关于大学排名的网站,其中遇到了上图中的问题,需向某个对象中添加新的学校群体,这就用到了
ListBox,而要进行两个ListBox之间的交互,无疑有两个办法:一个是在服务器端与客户端不停的PostBack,这无疑会大大降低效率。这是就体现出JavaScript在客户端的优势。下面介绍一下,又不足的地方希望大家指出!
下面是JS代码:用四个函数分别对应四个按钮,完成该功能。

None.gif < script type = " text/javascript " >
None.gif        function SelectAll()
ExpandedBlockStart.gif        
{
InBlock.gif            var lst1
=window.document.getElementById("<%=lb_Sourse.ClientID %>");
InBlock.gif            var length 
= lst1.options.length;
InBlock.gif             var 
string = window.document.getElementById("<%=hf_NewName.ClientID %>")
InBlock.gif            
for(var i=0;i<length;i++)
ExpandedSubBlockStart.gif            
{
InBlock.gif                var v 
= lst1.options[i].value;
InBlock.gif                var t 
= lst1.options[i].text;             
InBlock.gif                var lst2
=window.document.getElementById("<%=lb_NewName.ClientID %>");
InBlock.gif                lst2.options[i] 
= new Option(t,v,true,true);
InBlock.gif                
string.value+=v;
ExpandedSubBlockEnd.gif            }

ExpandedBlockEnd.gif        }

None.gif        
None.gif        function DelAll()
ExpandedBlockStart.gif        
{
InBlock.gif            var lst2
=window.document.getElementById("<%=lb_NewName.ClientID %>");
InBlock.gif            var length 
= lst2.options.length;
InBlock.gif            
for(var i=length;i>0;i--)
ExpandedSubBlockStart.gif            
{
InBlock.gif                lst2.options[i
-1].parentNode.removeChild(lst2.options[i-1]);
ExpandedSubBlockEnd.gif            }

ExpandedBlockEnd.gif        }

None.gif        
None.gif        function SelectOne()
ExpandedBlockStart.gif        
{
InBlock.gif          var 
string = window.document.getElementById("<%=hf_NewName.ClientID %>")
InBlock.gif            var lst1
=window.document.getElementById("<%=lb_Sourse.ClientID %>");
InBlock.gif            var lst2
=window.document.getElementById("<%=lb_NewName.ClientID %>");
InBlock.gif            var lstindex
=lst1.selectedIndex;
InBlock.gif            var length 
= lst2.options.length;
InBlock.gif            var isExists 
= false;
InBlock.gif            
if(lstindex<0)
InBlock.gif                
return;
InBlock.gif            
else if(length != null)
ExpandedSubBlockStart.gif            
{
InBlock.gif                
for(var i=0;i < length; i++)
ExpandedSubBlockStart.gif                
{
InBlock.gif                     
if(lst2.options[i].text == lst1[lstindex].text&&lst2.options[i].value == lst1[lstindex].value)
ExpandedSubBlockStart.gif                     
{
InBlock.gif                        isExists 
= true;
ExpandedSubBlockEnd.gif                     }

ExpandedSubBlockEnd.gif                }

ExpandedSubBlockEnd.gif            }

InBlock.gif            
else
ExpandedSubBlockStart.gif            
{
InBlock.gif                
return;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
if (isExists == false)
ExpandedSubBlockStart.gif            
{
InBlock.gif                var v 
= lst1.options[lstindex].value;
InBlock.gif                var t 
= lst1.options[lstindex].text;
InBlock.gif                lst2.options[lst2.options.length] 
= new Option(t,v,true,true);
InBlock.gif                
string.value+=v;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
else
ExpandedSubBlockStart.gif            
{
InBlock.gif                alert(
"所选条目已经存在");
InBlock.gif                
return false;
ExpandedSubBlockEnd.gif            }

ExpandedBlockEnd.gif        }

None.gif        
None.gif        function DelOne()
ExpandedBlockStart.gif        
{
InBlock.gif            var lst2
=window.document.getElementById("<%=lb_NewName.ClientID %>");
InBlock.gif            var lstindex
=lst2.selectedIndex;
InBlock.gif            
if(lstindex>=0)
ExpandedSubBlockStart.gif            
{
InBlock.gif                var v 
= lst2.options[lstindex].value+";";
InBlock.gif                lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
ExpandedSubBlockEnd.gif            }

ExpandedBlockEnd.gif        }

None.gif
</ script >
None.gif

需要解释的是由于JS脚本是在客户端执行的,因此服务器端控件是无法调用JS的,由于ID无法被找到,但用<%=lb_NewName.ClientID %>的方法就巧妙的解决得该问题,是asp控件拥有客户端id,这样就可以调用了。
希望对大家有所帮助!
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值