多选小插件

效果如下：

JS 部分：

 

//@ sourceURL=selectleftright.js
/**
* Created by db on 2017/8/4. 依赖Bootstrap,jQuery
*/

if (typeof SLR !== "object") {
SLR = {};
}

(function () {
var html = '\
<div style="display: none;" aria-hidden="false" class="modal fade" id="selectLeftRightModal" tabindex="-1">\
<div class="modal-dialog">\
<div class="modal-content" id="modal-content">\
<div class="modal-header">\
<button type="button" data-dismiss="modal" class="close" aria-hidden="true"><font color="red">×</font></button>\
<h4 class="modal-title" id="slr_modalTitle">编辑</h4>\
</div>\
<div class="modal-body" style="padding: 15px 30px;">\
<div class="container-fluid">\
<div class="row">\
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 slr_lefttitle" style="text-align: left;">\
待选\
</div>\
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">\
</div>\
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 slr_righttitle" style="text-align: left;">\
已选\
</div>\
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="text-align: center;">\
<button type="button" id="slr_clear" class="btn btn-sm btn-primary" >清空</button>\
</div>\
</div>\
<div class="row">\
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 slr_leftdiv">\
<select id="slr_leftsel" multiple="multiple" size="10" style="width:100%;height:200px">\
</select>\
</div>\
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 slr_centerdiv">\
<button type="button" id="toright" class="btn btn-sm btn-default" style="margin-top:40px;margin-left:20px;">>></button>\
<button type="button" id="toleft" class="btn btn-sm btn-default" style="margin-top:40px;margin-left:20px;"><<</button>\
</div>\
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 slr_rightdiv">\
<select id="slr_rightsel" multiple="multiple" size="10" style="width:100%;height:200px">\
</select>\
</div>\
</div>\
</div>\
</div>\
<div class="modal-footer" id="buttonContainer">\
<button type="button" id="slr_sure" class="btn btn-sm btn-primary">确定</button>\
<button type="reset" id="slr_cancel" class="btn btn-sm btn-default">取消</button>\
</div>\
</div>\
</div>\
</div>\
';
var modalid = "selectLeftRightModal";
var param = {};

function selModal(par)
{
param = par;

init();

$("#"+modalid).modal('show');
}

function init(){
$("#"+modalid).remove();
$("body").append(html);

inittitle();

initaction();

if(param.url)
{
initWithUrl();
return; //url优先
}

if(param.options)
{
initWithData();
}
}

function initWithUrl(){
$.getJSON(
param.url,
param.data||{},
function(data,status,xhr){
if(status != 200)
{
throw "request fails ! status is "+status; //如果请求出错,则抛出异常
}
if(data.leftoptions&&Array.isArray(data.leftoptions))
{
$(data.leftoptions).each(function(){
if(this.value&&this.text)
{
$("#slr_leftsel").append($("<option value='"+this.value+"'>"+this.text+"</option>"));
}
});
}

if(data.rightoptions&&Array.isArray(data.rightoptions))
{
$(data.rightoptions).each(function(){
if(this.value&&this.text)
{
$("#slr_rightsel").append($("<option value='"+this.value+"'>"+this.text+"</option>"));
}
});
}
}
);
}

function initWithData()
{
if(param.options.leftoptions&&Array.isArray(param.options.leftoptions))
{
$(param.options.leftoptions).each(function(){
if(this.value&&this.text)
{
$("#slr_leftsel").append($("<option value='"+this.value+"'>"+this.text+"</option>"));
}
});
}

if(param.options.rightoptions&&Array.isArray(param.options.rightoptions))
{
$(param.options.rightoptions).each(function(){
if(this.value&&this.text)
{
$("#slr_rightsel").append($("<option value='"+this.value+"'>"+this.text+"</option>"));
}
});
}
}

function inittitle(){
if(param.title)
{
$("#slr_modalTitle").text(param.title);
}
if(param.lefttitle)
{
$(".slr_lefttitle").text(param.lefttitle);
}
if(param.righttitle)
{
$(".slr_righttitle").text(param.righttitle);
}
}

function initaction(){
$("#slr_sure").click(sure);
$("#slr_cancel").click(calcel);
$("#toright").click(toright);
$("#toleft").click(toleft);

$("#slr_clear").click(slr_clear);
}

function toright(){
$($("#slr_leftsel").children()).each(function(){
if(this.selected)
{
this.selected = false;
$("#slr_rightsel").append(this);
}
});
}

function toleft(){
$($("#slr_rightsel").children()).each(function(){
if(this.selected)
{
this.selected = false;
$("#slr_leftsel").append(this);
}
});
}

function slr_clear(){
$($("#slr_rightsel").children()).each(function(){
this.selected = false;
$("#slr_leftsel").append(this);
});
}

function sure(){
if(param.sure)
{
var roptions= [];
$($("#slr_rightsel").children()).each(function(){
roptions.push({value:this.value,text:this.text});
});
param.sure(roptions);
}
$("#"+modalid).modal('hide');
}

function calcel(){
if(param.cancel)
{
param.cancel();
}
$("#"+modalid).modal('hide');
}

SLR.selModal = selModal;

}(SLR,$));

//-----------------------------------------tutorial------------------------------------------
// use it with local data
//SLR.selModal({
// title:"编辑XXX",
// lefttitle:"我是左边标题",
// righttitle:"我是右边标题",
// sure:function(data){console.log(data);},
// cancel:function(){},
// options:{
// leftoptions:[{value:"1",text:"1"},{value:"2",text:"2"},{value:"3",text:"3"}],
// rightoptions:[{value:"4",text:"4"}],
// }
//});
// OR use it with url which return data like this : {leftoptions:[{value:"1",text:"1"}],rightoptions:[],}
//SLR.selModal({
// title:"编辑xxx",
// lefttitle:"我是左边标题",
// righttitle:"我是右边标题",
// sure:function(data){console.log(data);},
// cancel:function(){},
// url:url
// data:{}
//});

CSS部分：

/**
* Created by db on 2017/8/4.
*/

#slr_clear{
margin-bottom:6px;
float:right
}

.slr_lefttitle, .slr_righttitle, .slr_leftdiv, .slr_rightdiv{
padding-right: 15px !important;
padding-left: 15px !important;
}