要求:模擬實現Select列表元素左右移動
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>
<select id="unAssigned" multiple size="10" style="width:150px;overflow-y:auto;">
<option value="se">SE</option>
<option value="tl">TL</option>
<option value="qc">QC</option>
<option value="pg">PG</option>
</select>
</td>
<td>
<div id="left2right"> >>> </div>
<div id="right2left"> <<< </div>
</td>
<td>
<select id="assigned" multiple size="10" style="width:150px;overflow-y:auto;">
</select>
</td>
</tr>
</table>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#assigned").empty();
$("#left2right").click(function () {
let opts = $("#unAssigned :selected");
if (opts.length == 0) {
alert("請選擇要分配的角色信息");
} else {
$("#assigned").append(opts);
}
});
$("#right2left").click(function () {
let opts = $("#assigned :selected");
if (opts.length == 0) {
alert("請選擇要撤消的角色信息");
} else {
$("#unAssigned").append(opts);
}
});
});
</script>
</body>
</html>