jQuery使用appendTo()函数实现Select下拉列表项的左右移动
作者:互联网
今天jQuery学习到appendTo()函数时,定义为在被选元素的结尾插入HTML元素。
于是利用该函数做了两个Select下拉列表项左右选择移动的功能,以下为完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用appendTo实现Select下拉列表项的左右移动</title>
<style type="text/css">
select {
width: 110px;
height: 95px;
}
body {
text-align: center;
}
div {
width: 130px;
display: inline-block;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// 选中选项添加到右边按钮功能
$(":button:eq(0)").click(function () {
$("select[name='sel1'] option:selected").appendTo("select[name='sel2']");
});
// 全部选项添加到右边按钮功能
$(":button:eq(1)").click(function () {
$("select[name='sel1'] option").appendTo("select[name='sel2']");
});
// 选中选项添加到左边按钮功能
$(":button:eq(2)").click(function () {
$("select[name='sel2'] option:selected").appendTo("select[name='sel1']");
});
// 全部选项添加到左边按钮功能
$("button:eq(3)").click(function () {
$("select[name='sel2'] option").appendTo("select[name='sel1");
});
});
</script>
</head>
<body>
<div id="left">
<!--multiple属性规定可同时选择多个选项-->
<select size="5" multiple="multiple" name="sel1">
<option value="opt1">选项一</option>
<option value="opt2">选项二</option>
<option value="opt3">选项三</option>
<option value="opt4">选项四</option>
<option value="opt5">选项五</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="right">
<!--对于 windows:按住 Ctrl 按钮来选择多个选项
对于 Mac:按住 command 按钮来选择多个选项-->
<select multiple="multiple" name="sel2">
</select>
<button>选中添加到左边</button>
<button>全部添加到左边</button>
</div>
</body>
</html>
代码运行效果:
标签:jQuery,选项,name,function,appendTo,Select,添加,select 来源: https://www.cnblogs.com/xiqingbo/p/front-end-06.html