html中左右移动选择框,jquery 下拉选择框 左右移动 左右添加

[javascript]代码库/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

/*

* { margin:0; padding:0; }

div.centent {

float:left;

text-align: center;

margin: 10px;

}

span {

display:block;

margin:2px 2px;

padding:4px 10px;

background:#898989;

cursor:pointer;

font-size:12px;

color:white;

}

/*]]>*/

//

$(function(){

//移到右边

$('#add').click(function() {

//获取选中的选项，删除并追加给对方

$('#select1 option:selected').appendTo('#select2');

});

//移到左边

$('#remove').click(function() {

$('#select2 option:selected').appendTo('#select1');

});

//全部移到右边

$('#add_all').click(function() {

//获取全部的选项,删除并追加给对方

$('#select1 option').appendTo('#select2');

});

//全部移到左边

$('#remove_all').click(function() {

$('#select2 option').appendTo('#select1');

});

//双击选项

$('#select1').dblclick(function(){ //绑定双击事件

//获取全部的选项,删除并追加给对方

$("option:selected",this).appendTo('#select2'); //追加给对方

});

//双击选项

$('#select2').dblclick(function(){

$("option:selected",this).appendTo('#select1');

});

});

//]]>

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选中添加到右边>> 全部添加到右边>>

选项8

<<选中删除到左边 <<全部删除到左边

[代码运行效果截图]