提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端基础 - JQuery实现左右选中

jQuery基础前端 实现 选中 左右
2023-09-11 14:15:41 时间

JQuery实现左右选中

效果：
在这里插入图片描述

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>左右选中.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//给第一个按钮派发单击事件
				$("#toRight1").click(function() {
					//把选中的第一个数据移动到右侧
					$("#left option:selected:first").appendTo($("#right"));
				})

				//给第二个按钮派发单击事件
				$("#toRight2").click(function() {
					//把选中的数据移动到右侧
					$("#left option:selected").appendTo($("#right"));
				})

				//给第三个按钮派发单击事件
				$("#toRight3").click(function() {
					//把所有的数据移动到右侧
					$("#left option").appendTo($("#right"));
				})
			})
		</script>

		<style>
			input[type='button'] {
				width: 50px;
			}
		</style>

	</head>

	<body>
		<table>
			<tr>
				<td>
					<select id="left" multiple="true" style="width:100px" size="10">
						<option>環</option>
						<option>芈</option>
						<option>琅</option>
						<option>琊</option>
						<option>爨</option>
						<option>甄</option>
						<option>槑</option>
						<option>夔</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight1"><br>
					<input type="button" value=">>" id="toRight2"><br>
					<input type="button" value=">>>" id="toRight3"><br><br>
				</td>
				<td>
					<select id="right" multiple="true" style="width:100px" size="10">

					</select>
				</td>
			</tr>
		</table>
	</body>

</html>

相关文章