Jquery之選擇器與方法綜合練習

NO IMAGE

首先建立test.html檔案,內容如下:
這裡用的jquery版本是jquery-1.8.2.js,

http://download.csdn.net/detail/broccoli2/9922753

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>   <!-- multiple表示可以多選 -->
<select style="width:60px" multiple size="10" id="leftID">
<option>選項A</option>
<option>選項B</option>
<option>選項C</option>
<option>選項D</option>
<option>選項E</option>
<option>選項F</option>
<option>選項G</option>
<option>選項H</option>
<option>選項I</option>
<option>選項J</option>
</select>
</div>
<div style="position:absolute;left:100px;top:60px">
<input type="button" value="批量右移" id="rightMoveID"/>
</div>
<div style="position:absolute;left:100px;top:90px">
<input type="button" value="全部右移" id="rightMoveAllID"/>
</div>
<div style="position:absolute;left:220px;top:20px"> 
<select multiple size="10" style="width:60px" id="rightID">
</select>
</div>
</body>
<script type="text/javascript">
//雙擊右移
//定位左邊的下拉框,同時新增雙擊事件
$("#leftID").dblclick(function(){
//獲取雙擊時選中的option標籤
var $option = $("#leftID option:selected");
//將選中的option標籤移動到右邊的下拉框中
$("#rightID").append( $option );
});
//批量右移
//定位批量右移按鈕,同時新增單擊事件
$("#rightMoveID").click(function(){
//獲取左邊下拉框中選中的option標籤
var $option = $("#leftID option:selected");
//將選中的option標籤移動到右邊的下拉框中
$("#rightID").append( $option );
});     
//全部右移
//定位全部右移按鈕,同時新增單擊事件
$("#rightMoveAllID").click(function(){
//獲取左邊下拉框中所有的option標籤
var $option = $("#leftID option");
//將選中的option標籤移動到右邊的下拉框中
$("#rightID").append( $option );
});
</script>
</html>