基于jquery实现select选择框内容左右移动添加删除代码分享

基于基于jquery实现实现select选择框内容左右移动添加删除代码分享选择框内容左右移动添加删除代码分享

主要介绍了基于jquery实现select选择框内容左右移动添加删除功能，推荐给大家，有需要的小伙伴可以参考

下。

本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下：

select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左

右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！

运行效果图： ----------------------查看效果-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

a,img{border:0;}

body{font:12px/normal "microsoft yahei";}

.selectbox{width:500px;height:220px;margin:100px auto;}

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

</style>

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

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

}

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

else{

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

}

});

//移到左边

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

}

});

//全部移到右边

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

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

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

});

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

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

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

});

//双击选项

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

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

});