(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.运行结果
时间: 2024-09-27 23:28:15