jQuery元素的左右移动

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>

巴特西

jQuery元素的左右移动

最新文章

热门文章