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

JQuery实现左右选中

效果：

代码：

	
		左右选中.html
		
		
		
			$(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"));
				})
			})
		

		
			input[type='button'] {
				width: 50px;
			}
		

	

	
		
			
				
					
						環
						芈
						琅
						琊
						爨
						甄
						槑
						夔