码迷,mamicode.com
首页 > Web开发 > 详细

使用util.js处理列表

时间:2016-05-13 00:16:47      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

(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="添加选项" onclick="add();"/>
<input type="button" value="删除选项" onclick="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.运行结果

技术分享

使用util.js处理列表

标签:

原文地址:http://blog.csdn.net/owen_william/article/details/51346554

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!