点击左右移动下拉选项小案例

效果图

js代码

<script type="text/javascript">
$(function(){
$("#add").click(function(){
$("#all_role option:selected").appendTo($("#to_role "));
});
$("#add_all").click(function(){
$("#all_role option").appendTo($("#to_role "));
});
$("#remove").click(function(){
$("#to_role option:selected").appendTo("#all_role");
});
$("#remove_all").click(function(){
$("#to_role option").appendTo("#all_role");
});
});
</script>

HTML代码

<div style="padding-top:10px;"><span class="blue">您可以用“Ctrl+鼠标左键”选择多个角色同时添加或删除</span></div>
<div style="float: left;padding-top:15px;">
<div class="DIV1" style="float: left ;width: 100px">
<select id="all_role" multiple="multiple" style="width:90px;height:160px;" style="width:100px">
<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>
<div class="DIV1" style="float: left;padding-left:7px;padding-top:20px;width: 100px">
<div style="padding-top:-10px;">
<input id="add_all" type="button" class="sub" value="全部添加>>" style="height:25px;width:90px;"/> 
<input id="add" type="button" class="sub" value="添加>>" style="height:25px;width:90px;"/> 
</div>
<div style="padding-top:10px;">
<input id="remove" type="button" class="sub" value="<<删除" style="height:25px;width:90px;"/> 
<input id="remove_all" type="button" class="sub" value="<<全部删除" style="height:25px;width:90px;"/> 
</div>
</div>
<div class="DIV3" style="float: left;padding-left:10px;width: 10px;" >
<select id="to_role" name="roles" multiple="multiple" style="width:90px;height:160px;" size="10px">
</select>
</div>
</div>