jquery左右选中(用select建框)

在这里插入图片描述

在这里插入图片描述

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../JS/jquery-1.11.0.min.js" ></script>
		
		<script>
			$(function(){
				//把选中的第一个数据移动到右侧
				$("#btn1").click(function(){
					$("select option:selected:first").appendTo("#you")					
				})
				
				//把选中的所有数据移动到右侧
				$("#btn2").click(function(){
					$("select option:selected").appendTo("#you")
				})
				
				//不管选没选中,全部过去
				$("#btn3").click(function(){
					$("select option").appendTo("#you")
				})
				
				
			})
				
				
		</script>

		

	</head>


<body>
	
	<table>
		
		<tr>
			
			<td>
					
				<select id="zuo" multiple="true" style="width: 100px;" size="10">
					
					<option>haha</option>
					<option>wdr</option>
					<option>cdf</option>
					<option>54</option>
					<option>ghg</option>
					<option>rws</option>
					
				</select>
				
			</td>
			<td>
					
				<button id="btn1">选中的点一个去一个</button><br />
				<button id="btn2">选中的全部过去</button><br />
				<button id="btn3">全部过去</button>
							
			</td>
			<td>
				
				<select id="you" multiple="true" style="width: 100px;" size="10">

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

</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_44063001/article/details/87914721