左右select选择

最新推荐文章于 2021-12-30 11:24:49 发布

eileen823

最新推荐文章于 2021-12-30 11:24:49 发布

阅读量638

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/eileen823/article/details/56536954

版权

web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

左右select选择

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../../js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#left1").click(function(){
				var $first=$("select :selected:first");
				/*$("select :selected:first").remove();
				$("#rightSelectId").append($first);*/
				$("select :selected:first").appendTo($("#rightSelectId"));
				$("select :selected:first").prop("selected",false);//设置这一栏的选择功能失效
			});
			$("#left2").click(function(){
				$("select :selected").appendTo($("#rightSelectId"));
				$("select :selected").prop("selected",false);//设置这一栏的选择功能失效
				/*var $second=$("select :selected");
				$("select :selected:first").remove();
				$("#rightSelectId").append($second);*/
			});
			$("#left3").click(function(){
				/*var $third=$("option");
				$("#rightSelectId").append($third);*/
				$("option").appendTo($("#rightSelectId"));
				$("option").prop("selected",false);//设置这一栏的选择功能失效
			});
			$("#right1").click(function(){
				$("select :selected:first").appendTo($("#leftSelectId"));
			$("select :selected:first").prop("selected",false);//设置这一栏的选择功能失效
				/*var $first=$("select :selected:first");
				$("select :selected:first").remove();
				$("#leftSelectId").append($first);*/
				
			});
			$("#right2").click(function(){
				$("select :selected").appendTo($("#leftSelectId"));
				$("select :selected:first").prop("selected",false);//设置这一栏的选择功能失效
			/*	var $second=$("select :selected");
				$("select :selected:first").remove();
				$("#leftSelectId").append($second);*/
			});
			$("#right3").click(function(){
				$("option").appendTo($("#leftSelectId"));
				$("select :selected:first").prop("selected",false);//设置这一栏的选择功能失效
				/*var $third=$("option");
				$("#leftSelectId").append($third);*/
				//$("option").appendTo($("#rightSelectId"))
			});
		});
	</script>
	
	<style type="text/css">
		.textClass {
			background-color: #ff0000;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td>
				<select id="leftSelectId" style="width:100px" multiple="multiple" size="6">
					<option>无锡</option>
					<option>上海</option>
					<option>南京</option>
					<option>苏州</option>
					<option>北京</option>
				</select>
				
			</td>
			<td>
				<input id="left1" type="button" value=">" style="width:50px"/> <br/>
				<input id="left2" type="button" value=">>" style="width:50px"/> <br/>
				<input id="left3" type="button" value=">>>" style="width:50px"/> <br/>
				
				<input id="right1" type="button" value="<" style="width:50px"/> <br/>
				<input id="right2" type="button" value="<<" style="width:50px"/> <br/>
				<input id="right3" type="button" value="<<<" style="width:50px"/> <br/>
				
			</td>
			<td>
				<select id="rightSelectId"  style="width:100px" multiple="multiple" size="6">
					
				</select>
				
			</td>
		</tr>
	</table>
		
</body>
</html>

eileen823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右select选择

左右select选择Insert title here $(document).ready(function(){ $("#left1").click(function(){ var $first=$("select :selected:first"); /*$("select :selected:first").remove(); $("#r
复制链接

扫一扫