Jquery之选择器与方法综合练习
首先创建test.html文件，内容如下：
这里用的jquery版本是jquery-1.8.2.js,
<!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>
科大讯飞公司氛围 455人发布