下拉选移动功能css代码,左右移动的下拉框（原创）

Html

Css

Js

系统账号列表

梁伟

李明

郭靖

张三

李四

黎明

该角色已分配账号

* {

margin:0;

padding:0;

list-style-type:none;

outline:none;

}

a,img {

border:0;

}

body {

font:12px/normal "microsoft yahei";

}

.selectbox {

width:500px;

height:220px;

margin:100px auto;

position:relative

}

.selectbox div {

float:left;

}

.selectbox .select-bar {

padding:0 20px;

}

.selectbox .select-bar select {

width:150px;

height:200px;

border:1px #A0A0A4 solid;

padding:4px;

font-size:14px;

font-family:"microsoft yahei";

}

.btn-bar {

}.btn-bar p {

margin-top:16px;

}

.btn-bar p .btn {

width:50px;

height:30px;

cursor:pointer;

font-family:simsun;

font-size:14px;

}

$(function() {

//移到右边

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

//先判断是否有选中

if (!$("#select1 option").is(":selected")) {

alert("请选择需要移动的选项")

}

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

else {

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

}

});

//移到左边

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

//先判断是否有选中

if (!$("#select2 option").is(":selected")) {

alert("请选择需要移动的选项")

} else {

$('#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'); //追加给对方

});

});