使用util.js处理列表

(util.js文件的链接:http://pan.baidu.com/s/1kUMJNrL 密码:fiqs)

1.前言

此处所指的列表,不仅包括<select…/>元素产生列表框、下拉菜单,还包括<ul…/>和<ol…/>列表。操作这种列表当然可直接通过DOM操作来完成,但通过util.js函数将更加简单。

处理列表相关函数主要由dwr.util对象的removeAllOptions()和addOptions()两个函数写成。其中removeAllOptions()函数用于删除列表中的所有项,而addOptions()则用于添加列表项。addOption()共有如下5种形式。

1)        字符串数组:dwr.util.addOptions(selectid,array).

2)        对象数组:dwr.util.addOptions(selected,data,prop).

3)        对象数组:dwr.util.addOptions(selected,array,valueprop,textprop).

4)        对象:dwr.util.addOptions(selected,mapObject,reverse).

5)        使用对象作为属性值的对象:dwr.util.addOptions(selected,mapObj,valueprop,textprop).

2.例子 

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> util.js测试 </title>
</head>
<body>
<ol id="test"></ol>
<input type="button" value="添加选项" οnclick="add();"/>
<input type="button" value="删除选项" οnclick="del();"/>
<script src="../util.js" type="text/javascript"></script>
<script type="text/javascript">
// 定义一个对象数组
var objArr = [
	{book:'Java' , price:'99'},
	{book:'Ajax' , price:'79'},
	{book:'XML' , price:'69'}
];
function add()
{
	// 以对象数组为列表框添加列表项
	// 以第三个参数指定的属性作为各列表项的文本
	// 以第四个参数已经没有作用了
	dwr.util.addOptions("test" , objArr , 'book' , 'price');
}
function del()
{
	// 删除所有列表项
	dwr.util.removeAllOptions("test");
}
</script>
</body>
</html

3.运行结果



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值