21.左右选中案例 

<!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.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			
			$("#toRight1").click(function(){
				$("#right").append($("#left>option:selected:first"));
			});
			
			//移选中的所有
			$("#toRight2").click(function(){
				$("#right").append($("#left>option:selected"));
			});
			
			//移所有的
			$("#toRight3").click(function(){
				$("#right").append($("#left>option"));
			});
		})
		
	</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>
				<input type="button" value="<" id="toLeft1"><br>
				<input type="button" value="<<" id="toLeft2"><br>
				<input type="button" value="<<<" id="toLeft3">
			</td>
			<td>
				<select id="right" multiple="true" style="width:100px" size="10">
					
				</select>
			</td>
		</tr>
		
	</table>
		
		
		
	</body>

</html>

　　

posted @ 2018-02-23 16:10  一日看尽长安花cxjj  阅读(100)  评论(0)    收藏  举报