<!DOCTYPE html>
<html>
<head>
<meta http–equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>从左到右、从右到左</title>
<style type=”text/css“>
select {
width: 100px;
height: 300px;
}
div {
width: 130px;
float: left;
text–align: center;
}
</style>
<script type=”text/javascript” src=”script/jquery-1.7.2.js“></script>
<script type=”text/javascript“>
//页面加载完毕开始执行
$(function(){
//选中添加到右边
$(“button:eq(0)”).click(function(){
//select标签中name=sel01的元素里被选中的元素执行循环函数
$(“select[name=sel01] :selected“).each(function(){
//alert(this);
//appendTo() 比如：a.appendTo(b) 表示把 a 插入到 b 子元素末尾，成为最后一个子元素
$(this).appendTo(“select[name=sel02]”);
});
});
//全部添加到右边
$(“button:eq(1)”).click(function(){
//选定select标签中name=sel01里面所有的option元素，执行循环函数
$(“select[name=sel01] option“).each(function(){
//alert(this);
$(this).appendTo(“select[name=sel02]”);
});
});
//选中删除到左边
$(“button:eq(2)”).click(function(){
$(“select[name=sel02] :selected“).each(function(){
//alert(this);
$(this).appendTo(“select[name=sel01]”);
});
});
//全部删除到左边
$(“button:eq(3)”).click(function(){
$(“select[name=sel02] option“).each(function(){
//alert(this);
$(this).appendTo(“select[name=sel01]”);
});
});
});
</script>
</head>
<body>
<div id=”left“>
<select multiple=”multiple” name=”sel01″>
<option value=”opt00″>选项00</option>
<option value=”opt01″>选项01</option>
<option value=”opt02″>选项02</option>
<option value=”opt03″>选项03</option>
<option value=”opt04″>选项04</option>
<option value=”opt05″>选项05</option>
<option value=”opt06″>选项06</option>
<option value=”opt07″>选项07</option>
<option value=”opt08″>选项08</option>
<option value=”opt08″>选项10</option>
<option value=”opt08″>选项11</option>
<option value=”opt08″>选项12</option>
<option value=”opt08″>选项13</option>
<option value=”opt08″>选项14</option>
<option value=”opt08″>选项15</option>
<option value=”opt08″>选项16</option>
</select>
<br/>
<br/>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id=”right“>
<select multiple=”multiple” name=”sel02″>
</select>
<br/>
<br/>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
原文地址:https://blog.csdn.net/heliuerya/article/details/130912029
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_33284.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
