jquery實現select框內容的左右移動【經典】
阿新 • • 發佈：2019-01-22
<!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>