前端基础 - JQuery实现左右选中
JQuery实现左右选中 效果：代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
//给第一个按钮派发单击事件
$("#toRight1").click(function() {
//把选中的第一个数据移动到右侧
$("#left option:selected:first").appendTo($("#right"));
})
//给第二个按钮派发单击事件
$("#toRight2").click(function() {
//把选中的数据移动到右侧
$("#left option:selected").appendTo($("#right"));
})
//给第三个按钮派发单击事件
$("#toRight3").click(function() {
//把所有的数据移动到右侧
$("#left option").appendTo($("#right"));
})
})
</script>
<style>
input {
width: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15294985/2999294
页:
[1]