xml/html code

<div class=centent style=width:200px; float:left; margin-right:20px;>

<select multiple=multiple id=select1 style=width:150px; height:160px;>

<option value=1>選項(xiàng)1</option>

<option value=2>選項(xiàng)2</option>

<option value=3>選項(xiàng)3</option>

<option value=4>選項(xiàng)4</option>

<option value=5>選項(xiàng)5</option>

</select>

<div>

<span id=add style=display:block; width:140px; cursor:pointer;>選中添加到右邊>></span>

<span id=addall style=display:block; width:140px; cursor:pointer;>全部添加到右邊>></span>

</div></div>

<div class=centent style=width:200px; float:left; margin-right:20px;>

<select multiple=multiple id=select2 style=width:150px; height:160px;>

</select>

<div>

<span id=add1 style=display:block; width:140px; cursor:pointer;><<選中刪除到左邊</span>

<span id=addall1 style=display:block; width:170px; cursor:pointer;><<全部選中刪除到左邊</span>

</div>

</div>

javascript code

<script type=text/javascript>

//下拉框多選的應(yīng)用 9：57

$(function(){

//開(kāi)始把左邊的添加到右邊

$(#add).click(function(){ //把選中的添加到右邊

$option = $(#select1 option:selected);

$option.appendto(#select2);

})

$(#addall).click(function(){ //全部添加到右邊

$option = $(#select1 option);

$option.appendto(#select2);

})

$(#select1).dbclick(function(){ //雙擊添加到右邊

$option = $(#select1 option:selected,this);

$option.appendto(#select2);

})

//開(kāi)始右邊的添加到左邊

$(#add1).click(function(){ //把選中的添加到左邊

$option = $(#select2 option:selected);

$option.appendto(#select1);

})

$(#addall1).click(function(){ //全部添加到左邊

$option = $(#select2 option);

$option.appendto(#select1);

})

$(#select2).dbclick(function(){ //雙擊添加到左邊

$option = $(option:selected,this);

$option.appendto(#select1);

})

})

</script>