<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<script src="lib/jquery/jquery-1.3.2.min.js"></script>
<body>
<table>
<tr>
<td>
<select multiple id="select1" style="width: 100px;height:160px;">
<option value="1" title="test">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
<option value="4">選項4</option>
<option value="5">選項5</option>
<option value="6">選項6</option>
<option value="7">選項7</option>
<option value="8">選項8</option>
</select>
</td>
<td>
<a href="#" id="delOption">刪除</a><br />
<a href="#" id="left_up">上移</a><br />
<a href="#" id="left_down">下移</a><br />
<a href="#" id="allToLeft">全部右移</a><br />
<a href="#" id="allToRight">全部左移</a><br />
<a href="#" id="add">添加到右邊>></a><br />
<a href="#" id="del"><<添加到左邊</a>
</td>
<td>
<select multiple id="select2" style="width: 100px;height:160px;">
</select>
</td>
</tr>
</table>
<script>

$("#allToLeft").click(function()
{
$("#select1 option").appendTo("#select2");
});
$("#allToRight").click(function()
{
$("#select2 option").appendTo("#select1");
});
$("#delOption").click(function()
{
$("#select1 option:selected").remove();
});
$("#left_up").click(function()
{
var index = $('#select1 option').index($('#select1 option:selected:first'));
var $recent = $('#select1 option:eq('+(index-1)+')');
if(index>0)
{
var $options = $('#select1 option:selected').remove();
setTimeout(function()
{
$recent.before($options )
},10);
}
});
$('#left_down').click(function()
{
var index = $('#select1 option').index($('#select1 option:selected:last'));
var len = $('#select1 option').length-1;
var $recent = $('#select1 option:eq('+(index+1)+')');
if(index<len )
{
var $options = $('#select1 option:selected').remove();
setTimeout(function()
{
$recent.after( $options )
},10);
}
});
$("#add").click(function()
{
$("#select1 option:selected").appendTo("#select2");
});
$("#del").click(function()
{
$("#select2 option:selected").appendTo("#select1");
});
$("#select1").dblclick(function()
{
$("option:selected",this).appendTo("#select2");
});
$("#select2").dblclick(function()
{
$("option:selected",this).appendTo("#select1");
});
</script>
</body>
</html>

