<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type="text/javascript">
	$(document).ready(function() {
		$("#groupsForSelect").dblclick(function() {
			selected();
		});
		$("#selectGroups").dblclick(function() {
			unselected();
		});
	});
	function selected() {
		var selOpt = $("#groupsForSelect option:selected");

		selOpt.remove();
		var selObj = $("#selectGroups");
		selObj.append(selOpt);

		var selOpt = $("#selectGroups")[0];
		ids = "";
		for (var i = 0; i < selOpt.length; i++) {
			ids += (selOpt[i].value + ",");
		}

		if (ids != "") {
			ids = ids.substring(0, ids.length - 1);
		}
		$('#txtGroupsSelect').val(ids);
	}

	function selectedAll() {
		var selOpt = $("#groupsForSelect option");

		selOpt.remove();
		var selObj = $("#selectGroups");
		selObj.append(selOpt);

		var selOpt = $("#selectGroups")[0];
		ids = "";
		for (var i = 0; i < selOpt.length; i++) {
			ids += (selOpt[i].value + ",");
		}

		if (ids != "") {
			ids = ids.substring(0, ids.length - 1);
		}
		$('#txtGroupsSelect').val(ids);
	}

	function unselected() {
		var selOpt = $("#selectGroups option:selected");
		selOpt.remove();
		var selObj = $("#groupsForSelect");
		selObj.append(selOpt);

		var selOpt = $("#selectGroups")[0];
		ids = "";
		for (var i = 0; i < selOpt.length; i++) {
			ids += (selOpt[i].value + ",");
		}

		if (ids != "") {
			ids = ids.substring(0, ids.length - 1);
		}
		$('#txtGroupsSelect').val(ids);
	}

	function unselectedAll() {
		var selOpt = $("#selectGroups option");
		selOpt.remove();
		var selObj = $("#groupsForSelect");
		selObj.append(selOpt);

		$('#txtGroupsSelect').val("");
	}
</script>
<div class="form-group">
	<input id="txtGroupsSelect" type="hidden" value="${txtRoleSelect}"
		name="txtGroupsSelect" /> <label for="host"
		class="col-sm-3 control-label">角色</label>
	<div class="col-sm-9">
		<table class="tweenBoxTable" name="groups_tweenbox"
			id="groups_tweenbox" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td>已角色</td>
					<td></td>
					<td>可角色</td>
				</tr>
				<tr>
					<td><select id="selectGroups" multiple="multiple"
						class="input-large" name="selectGroups"
						style="height: 150px; width: 150px">
							<c:forEach items="${userRole}" var="key">
								<option value="${key.roleId}">${key.roleName}</option>
							</c:forEach>
					</select></td>
					<td align="center">
						<div style="margin-left: 5px; margin-right: 5px">
							<button onclick="selectedAll()" class="btn btn-primary"
								type="button" style="width: 50px;" title="全选">&lt;&lt;</button>
						</div>
						<div style="margin-left: 5px; margin-right: 5px; margin-top: 5px;">
							<button onclick="selected()" class="btn btn-primary"
								type="button" style="width: 50px;" title="选择">&lt;</button>
						</div>
						<div style="margin-left: 5px; margin-right: 5px; margin-top: 5px;">
							<button onclick="unselected()" class="btn btn-primary"
								type="button" style="width: 50px;" title="取消">&gt;</button>
						</div>
						<div style="margin-left: 5px; margin-right: 5px; margin-top: 5px">
							<button onclick="unselectedAll()" class="btn btn-primary"
								type="button" style="width: 50px;" title="全取消">&gt;&gt;</button>
						</div>
					</td>
					<td><select id="groupsForSelect" multiple="multiple"
						class="input-large" style="height: 150px; width: 150px">
							<c:forEach items="${roles}" var="key">
								<option value="${key.roleId}">${key.roleName}</option>
							</c:forEach>
					</select></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>