Js完成ListBox内容的交互实例
来源:互联网 发布:南昌软件开发工作 编辑:程序博客网 时间:2024/05/16 08:44
这几天在做一个关于大学排名的网站,其中遇到了上图中的问题,需向某个对象中添加新的学校群体,这就用到了
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>
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内容的交互实例
- JS完成ListBox内容的交互实例
- ASP.NET应用JS完成ListBox内容的交互实例
- js移动listbox内容
- iOS获取webView的内容等(JS交互)
- VC++ 取得 其他app的ListBox 内容
- jsp与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- Android与js交互实例
- 泛型参与多封邮件发送的实例
- 高性能的网络游戏服务器的设计[转]
- NET 2.0远程传输数据集的优化方法
- oracle数据库命令行导入导出
- 如何在页面中添加焦点 JavaScript实例
- Js完成ListBox内容的交互实例
- IT公司需要什么样的考勤制度?
- 编程技巧 asp.net控件本质
- 网上开店的流程
- .NET学习全景图
- TreeView绑定数据库中的数据实例
- 感觉我身上的一点酸腐气常常把事情弄得很复杂
- javascript实现复选框的全选功能
- “整数类.到文本()”执行效率提升至原来的2.5倍以上