Jquery案例 之 双下拉框内容移动

用到的方法为: appendTo()

格式:$(content).appendTo(selector)

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

$("button").click(function(){
       $("<b>Hello World!</b>").appendTo("p");
 });

方法: dblclick() / click()

格式:$(selector).click(function)

click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数


下面我们来看一个完整的例子,如果你需要调试,请下载jquery-1.5.1.js文件载入:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP100视频教程</title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
button { 
	display:block; 
	margin:2px 2px;
	padding:4px 10px; 
}
</style>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//移到右边
	$('#add').click(function() {
	//获取选中的选项,删除并追加给对方
		$('#select1 option:selected').appendTo('#select2');
	});
	//移到左边
	$('#remove').click(function() {
		$('#select2 option:selected').appendTo('#select1');
	});
	//全部移到右边
	$('#add_all').click(function() {
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	//全部移到左边
	$('#remove_all').click(function() {
		$('#select2 option').appendTo('#select1');
	});
	//双击选项
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	//双击选项
	$('#select2').dblclick(function(){
	   $("option:selected",this).appendTo('#select1');
	});
});
</script>

</head>
<body>
	<div class="centent">
		<select multiple="multiple" id="select1" style="width:100px;height:160px;">
			<option value="1">PHP1001</option>
			<option value="2">PHP1002</option>
			<option value="3">PHP1003</option>
			<option value="4">PHP1004</option>
			<option value="5">PHP1005</option>
			<option value="6">PHP1006</option>
			<option value="7">PHP1007</option>
		</select>
		<div>
			<button id="add" >选中>></button>
			<button id="add_all" >全部>></button>
		</div>
	</div>

	<div class="centent">
		<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
			<option value="8">PHP1008</option>
		</select>
		<div>
			<button id="remove"><<选中</button>
			<button id="remove_all"><<全部</button>
		</div>
	</div>


</body>
</html>