jQuery实现select左右移动

最新推荐文章于 2022-11-13 11:38:25 发布

奔跑的james

最新推荐文章于 2022-11-13 11:38:25 发布

阅读量716

点赞数

分类专栏： JavaScript web 文章标签： jquer js

本文链接：https://blog.csdn.net/weixin_44960513/article/details/93778201

版权

这篇博客介绍如何利用jQuery实现select元素中选项的左右移动功能，通过提供的代码示例，展示了具体的操作效果。

摘要由CSDN通过智能技术生成

代码如下:
效果见文末


<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			select {
				width: 150px;
				height: 300px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script>
			$(function() {
				//添加左边双击事件
				$("#zuo>option").dblclick(function() {
					$(this).appendTo("#you"); //当前对象添加到右边
					$(this).prop("selected", false);
				});
				$("button:first").click(function() { //添加点击事件
					//被选择的标签,点击之后到右边
					$("#zuo>option:selected").appendTo("#you");
				});
				$("button:eq(1)").click(function() { //添加点击事件
					//所有标签,点击之后到右边
					$("#zuo>option").appendTo("#you");
				});
				//添加右边双击事件,由于jQuery不能实现同一种方法动态获取,所以换一种方式
				$("select:eq(1)").on("dblclick", "option", function() {
					$(this).appendTo("#zuo