jquery实现select框内容的左右移动【经典】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选框</title>
<style>
#div1{
position:relative;
margin-right:10px;
float:left;
}


</style>


<script language="javascript" type="text/javascript" src="../jquery-1.7.1.js"></script>


<script language="javascript" type="text/javascript">


$(document).ready(function (){
//双击将选中的option追加至select2中
$("#select1").dblclick(function (){

$("#select1 option:selected").prependTo("#select2");
});

//双击将选中的option追加至select1中
$("#select2").dblclick(function (){

$("#select2 option:selected").prependTo("#select1");
});

//点击第一个button按钮，将select1中选中的option追加到select2中
$("#btn1").click(function (){
$("#select1 option:selected").prependTo("#select2");
});


//点击第二个button按钮，将select1中的option全部到select2中
$("#btn2").click(function (){
$("#select1 option").prependTo("#select2");
});


//点击第三个button按钮，将select2中选中的option追加到select1中
$("#btn3").click(function (){
$("#select2 option:selected").prependTo("#select1");
});

//点击第四个button按钮，select2中的option全部到select1中
$("#btn4").click(function (){
$("#select2 option").prependTo("#select1");
});

});




</script>
</head>


<body>
<div id="div1">
选框一<br>
<select id="select1" multiple="multiple" style="width:100px; height:100px;">


<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<input type="button" id="btn2" value="全>>" />
<input type="button" id="btn1" value=">>" />
</div>
<div id="div2">
选框二<br>
<select id="select2" multiple="multiple" style="width:100px; height:100px;">




</select>
<br>
<input type="button" id="btn3" value="<<" />
<input type="button" id="btn4" value="<<全" />
</div>
</body>

</html>