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

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

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

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

 
 <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>