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

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

<div class="cnblogs_Highlighter"><pre class="brush:javascript;gutter:false;"> <div class="selectbox">     <div>     <select type="select" class="multiple" id="sleft" multiple="true" size="15">                       <option value="1">分类->添加分类</option>                       <option value="2">分类->分类列表</option>                       <option value="3">系统->网站设置</option>                       <option value="4">系统->网站基本资料修改</option>                       <option value="5">系统->网站优化设置</option>                       <option value="6">错误日志</option>                       <option value="7">内容->页面管理</option>                       <option value="8">内容->添加页面</option>                       <option value="9">内容->信息列表</option>                       <option value="10">内容->发布信息</option>                       <option value="11">分类->删除分类</option>                       <option value="12">分类->修改分类</option>                       <option value="13">会员>会员列表</option>                       <option value="14">会员>删除会员</option>                       <option value="15">查看评论列表</option>                       <option value="16">删除评论</option>                       <option value="17">网站链接管理</option>               </select>     </div>           <div class="move">         <button id="moveRight" class="btn"> >>  </button>             <button id="moveLeft" class="btn"> <<  </button>             <button id="save" class="btn">保存</button>     </div>        <div>     <select type="select" class="multiple" id="sright" multiple="true" size="15">               </select>     </div> </div>    <script type="text/javascript">        var lbtn=j.$('moveLeft'),rbtn=j.$('moveRight'),sbtn=j.$('save');     var ls=j.$('sleft'),rs=j.$('sright');       lbtn.onclick=function(){         for(var i=0;i<rs.options.length;i++){             if(rs.options[i].selected){                 rs.options[i].selected=false;                 ls.appendChild(rs.options[i]);                 i--;             }         }     };     rbtn.onclick=function(){         for(var i=0;i<ls.options.length;i++){             if(ls.options[i].selected){                 ls.options[i].selected=false;                 rs.appendChild(ls.options[i]);                 i--;             }         }     }; </script> </pre> </div>