当前位置：文江博客话题详情

一个简单Html元素Select增加删除项的例子

发布于 2022-10-15 05:54:35 字数 9435 浏览 17 评论 0

一个简单Html元素Select增加删除项的例子

一个很经典也很简单的情景。如为一个用户组添加和删除操作权限，一个来自实际项目中的简单界面如下:

1.gif (22.65 KB, 下载次数: 7)

下载附件

2011-05-27 12:02 上传

1.使用asp.net 自带的服务器控件可以实现图片所示功能，但缺点是每次都要请求服务端，如果带宽有限，操作则不流畅，实际上也等于是问题复杂化。

2.通过javascript方式,具体代码如下:

view sourceprint?

01 <DIV class=cnblogs_Highlighter><PRE class=brush:javascript;gutter:false;> <div class="selectbox">
02 <div>
03 <select type="select" class="multiple" id="sleft" multiple="true" size="15">
04
05 <option value="1">分类->添加分类</option>
06
07 <option value="2">分类->分类列表</option>
08
09 <option value="3">系统->网站设置</option>
10
11 <option value="4">系统->网站基本资料修改</option>
12
13 <option value="5">系统->网站优化设置</option>
14
15 <option value="6">错误日志</option>
16
17 <option value="7">内容->页面管理</option>
18
19 <option value="8">内容->添加页面</option>
20
21 <option value="9">内容->信息列表</option>
22
23 <option value="10">内容->发布信息</option>
24
25 <option value="11">分类->删除分类</option>
26
27 <option value="12">分类->修改分类</option>
28
29 <option value="13">会员>会员列表</option>
30
31 <option value="14">会员>删除会员</option>
32
33 <option value="15">查看评论列表</option>
34
35 <option value="16">删除评论</option>
36
37 <option value="17">网站链接管理</option>
38
39 </select>
40 </div>
41
42 <div class="move">
43 <button id="moveRight" class="btn"> >> </button>
44
45
46 <button id="moveLeft" class="btn"> << </button>
47
48
49 <button id="save" class="btn">保存</button>
50 </div>
51
52 <div>
53 <select type="select" class="multiple" id="sright" multiple="true" size="15">
54
55 </select>
56 </div>
57 </div>
58
59 <script type="text/javascript">
60
61 var lbtn=j.$('moveLeft'),rbtn=j.$('moveRight'),sbtn=j.$('save');
62 var ls=j.$('sleft'),rs=j.$('sright');
63
64 lbtn.onclick=function(){
65 for(var i=0;i<rs.options.length;i++){
66 if(rs.options[i].selected){
67 rs.options[i].selected=false;
68 ls.appendChild(rs.options[i]);
69 i--;
70 }
71 }
72 };
73 rbtn.onclick=function(){
74 for(var i=0;i<ls.options.length;i++){
75 if(ls.options[i].selected){
76 ls.options[i].selected=false;
77 rs.appendChild(ls.options[i]);
78 i--;
79 }
80 }
81 };
82 </script>
83 </PRE>
84 </DIV>