博客

jQuery元素的左右移动

  • Post author:
  • Post category:其他

 

1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796

2.代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤:
				1. 导入JQ的文件
				2. 文档加载函数 :页面初始化
				3.确定事件 :　点击事件　onclick
				4. 事件触发函数
					1. 移动被选中的那一项到右边
		-->
		<script type="text/javascript" src="../js/jquery-3.3.1.js.css" ></script>
		<script>
			$(function(){
				$("#a1").click(function(){
					//找到被选中的那一项
					//将被选中项添加到右边
					$("#rightSelect").append($("#leftSelect option:selected"));
				});
				
				//将左边所有商品移动到右边
				$("#a2").click(function(){
					$("#rightSelect").append($("#leftSelect option"));
				});
			});
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select multiple="multiple" id="leftSelect">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" id="a1" > &gt;&gt; </a> <br />
						<a href="#" id="a2"> &gt;&gt;&gt; </a>
					</div>
					<!--右边-->
					<div style="float: right;"> 
						未有商品<br />
						<select multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			
		</table>
		
		
	</body>
</html>

 

版权声明：本文为weixin_44718300原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。