appendTo的应用

选择标签

一个比较简单的案例，主要是为了理解jquery中的append()添加节点的方法
效果如下：

代码如下：
CSS部分

<style>
		select {
			height: 150px;
			width: 150px;
			background: #06f;
			font: 400 16px/30px "microsoft yehei";
			color: #fff;
		}
	</style>

body部分

<select name="" id="sec1" multiple="multiple">
		<option value="0">苹果</option>
		<option value="1">香蕉</option>
		<option value="2">菠萝</option>
		<option value="3">葡萄</option>
	</select>
	<button>>>></button>
	<button><<<</button>
	<button>></button>
	<button><</button>
	<select name="" id="sec2" multiple="multiple">
	</select>
	<script>
		$(function(){
			// 需求1：当点击前两个按钮的时候，第一个表单里的全部内容加入到第二个表单中去
			$("button").eq(0).click(function(){
				$("#sec1 option").appendTo("#sec2");
			});
			$("button").eq(1).click(function(){
				$("#sec2 option").appendTo("#sec1");
			});
			//需求：当点击后面两个按钮的时候，只移动选中的元素
			$("button").eq(2).click(function(){
				$("#sec1 option:selected").appendTo("#sec2");
			});
			$("button").eq(3).click(function(){
				$("#sec2 option:selected").appendTo("#sec1");
			});
		});
	</script>