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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

左右移动的下拉框(原创)

交互:设置人员

(1)第一个下拉框是列出系统全部账号列表;

(2)第二个下拉框是具体的角色已分配的账号列表;

(3)为角色分配账号,按钮向右移入,向左移出,双箭头的按钮是全部账号移入,或者移出。

0