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>选项1</option>

<option value=2>选项2</option>

<option value=3>选项3</option>

<option value=4>选项4</option>

<option value=5>选项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>

//下拉框多选的应用 9：57

$(function(){

//开始把左边的添加到右边

$(#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);

})

//开始右边的添加到左边

$(#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>