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>