前端基础 - JQuery实现左右选中

Arce

　　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[type='button'] {
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>

[jQuery] 前端基础 - JQuery实现左右选中

相关帖子

uniapp & vue 父子、子父、兄弟组件之间的传值

文件对比工具/Beyond Compare

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

php实现超简的分页功能

PHP版贪吃蛇小游戏

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

Arce LV4