Jquery实现多选下拉列表左右移动
更新时间：2022年02月22日 14:35:50 作者：a远方少年
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的，解决方法就是加一句阻止冒泡即可2014-09-09
这篇文章主要介绍了jQuery实现判断控件是否显示的方法,涉及jQuery针对页面元素属性相关操作技巧,需要的朋友可以参考下2017-01-01
jQuery控制图片的hover效果（smartRollover.js）
图片的hover效果可以用css来实现也可以用js来实现。典型的就是smartRollover.js2012-03-03
这篇文章主要给大家介绍了关于jquery两种导入方式之本地导入和线上导入的相关资料,jQuery是一款JavaScript库,封装了JavaScript相关方法调用,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
本文给大家分享一个自己编写的使用jquery+javascript实现的国籍控件，效果非常不错，这里推荐给大家。2015-02-02
这篇文章主要介绍了jQuery实现个性翻牌效果导航菜单的方法,实例分析了jQuery操作animate、css及鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
从上边的注释看，jQuery的源码结构相当清晰、条理，不像代码那般晦涩和让人纠结2011-11-11
JQuery验证jsp页面属性是否为空的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
jQuery实现列表自动滚动循环滚动展示新闻，鼠标悬停时停止滚动并提示，离开后，继续滚动，实现的代码如下，需要的朋友可以看看2014-08-08
浅谈window.onbeforeunload() 事件调用ajax
下面小编就为大家带来一篇浅谈window.onbeforeunload() 事件调用ajax。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论