左右角色移动

左右角色移动

function leftToRight() {
    var leftOption=$("#leftselect option");
    for(var i=0;i<leftOption.length;i++){
        if(leftOption.eq(i).prop("selected")){
            $("#rightselect").append(leftOption.eq(i));
        }
    }
    $.ajax({
        url : "${apppath}/user/assignRole",
        type : "post",
        data : $("#roleForm").serialize(),
        success : function(data) {
            alert("ok");
        }
    }); 
}

function rightToLeft() {
    var rightOption=$("#rightselect option");
    for(var i=0;i<rightOption.length;i++){
        if(rightOption.eq(i).prop("selected")){
            $("#leftselect").append(rightOption.eq(i));
        }
    }
    $.ajax({
        url : "${apppath}/user/deleteRole",
        type : "post",
        data : $("#roleForm").serialize(),
        success : function(data) {
            alert("ok");
        }
    }); 
}

				<form role="form" class="form-inline" id="roleForm">
				  <div class="form-group">
					<label for="exampleInputPassword1">未分配角色列表label><br>
					<select id="leftselect" name="leftRids" class="form-control" multiple size="10" style="width:100px;overflow-y:auto;">
                        <c:forEach items="${roleList}" var="role" varStatus="i">
                        	<option value="${role.rid}">${role.rname}option>
                        c:forEach>
                    select>
				  div>
				  <input type="hidden" name="uid" value="${userAssign.uid}">
				  <div class="form-group">
                        <ul>
                            <li class="btn btn-default glyphicon glyphicon-chevron-right" onclick="leftToRight()">li>
                            <br>
                            <li onclick="rightToLeft()" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;">li>
                        ul>
				  div>
				  <div class="form-group" style="margin-left:40px;">
					<label for="exampleInputPassword1">已分配角色列表label><br>
					<select id="rightselect" name="rightRids" class="form-control" multiple size="10" style="width:100px;overflow-y:auto;">
               			<c:forEach items="${assignedroleList}" var="assignedrole">
               				<option value="${assignedrole.rid}">${assignedrole.rname}option>
               			c:forEach>
                    select>
				  div>
				form>