本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码，供大家参考，具体内容如下 jquery实现核心代码 //需求：实现下拉列表选择条目左右选择功能
本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码，供大家参考，具体内容如下
jquery实现核心代码
//需求：实现下拉列表选择条目左右选择功能
$(function () {
//右移
$("#toRight").click(function () {
//获取右边的下拉列表对象，append(左边选中的对象)
$("#rightName").append($("#leftName > option:selected"));
});
//左移
$("#toLeft").click(function () {
$("#leftName").append($("#rightName > option:selected"));
});
})<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
<script>
//需求：实现下拉列表选择条目左右选择功能
$(function () {
//右移
$("#toRight").click(function () {
//获取右边的下拉列表对象，append(左边选中的对象)
$("#rightName").append($("#leftName > option:selected"));
});
//左移
$("#toLeft").click(function () {
$("#leftName").append($("#rightName > option:selected"));
});
})
</script>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option>赵六</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>钱七</option>
</select>
</div>
</body>
</html>--结束END--
本文标题: Jquery实现多选下拉列表左右移动
本文链接: https://lsjlt.com/news/140065.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0