JS 实现权限列表移动
JS 实现列表移动
学习内容：
用 JS 实现列表移动
实现代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表移动</title>
<script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
</script>
<script>
function moveAll(srcId, targetId) {
// （'#' + targetId）拼接字符串
$('#' + targetId).append($("#" + srcId + " > option"));
}
function moveSelected(srcId, targetId) {
// （'#' + targetId）拼接字符串
$('#' + targetId).append($('#' + srcId + ' > option:selected'));
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px;height:200px" size="10"
multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="moveSelected('select1','select2')"
value="-->"/><br/>
<input type="button" onclick="moveAll('select1','select2')"
value="==>"/><br/>
<input type="button" onclick="moveSelected('select2','select1')"
value="<--"/><br/>
<input type="button" onclick="moveAll('select2','select1')"
value="<=="/>
</td>
<td>
<select id="select2" style="width:100px;height:200px" size="10"
multiple="multiple"></select>
</td>
</tr>
</table>
</body>
</html>总结：
以上就是用 JS 实现列表移动，代码的简单实现了，仅供参考，欢迎讨论交流。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章