近期公司业务需求，需要使用到多选下拉框。因为项目使用的是jQuery框架，所以在multiselect插件上也就用了jQuery multiselect。
一、需要引用的文件
在开始的时候是需要引入一些插件相关的文件的,这些外部js文件在官网中有，自行下载即可
<!-- Start add by wgs 下拉多选框 样式 -->
<link rel="stylesheet" type="text/css" href="css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<!-- End 下拉多选框 --><!-- Start-多选下拉框 js外部文件-->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.multiselect.js"></script>
<!-- End-多选下拉框 -->二、HTML中的代码
这里需要注意的是select元素中最好的就指定一个id，然后后面通过id来获取select元素
<div class="row">
<div class="col-md-4 info-title">使用仓库:</div>
<div class="col-md-8">
<p>
<select class="info-input storage" id="Depot_name" name="Depot_name"></select>
<input type="hidden" id="Warehouse" />
</p>
</div>
</div>
三、下拉框的选项option是从后台抓取出来的，option是动态拼接出来的
动态的option的关键在于：
ajax的中拼接的option的方式 ，每次循环一次，做一次拼接，value代表的是即将拼接出来的<option value=' '></option>中的value
var opt = $('<option />', {
value: Pk,
value: Pk,
text: values
});
opt.appendTo($("#Depot_name"));
});
opt.appendTo($("#Depot_name"));
function StorageList(){
$("#Depot_name").html("").append("<option value=''>"+'仓库列表'+"</option>").append("<option value='1'>"+'暂无绑定仓库'+"</option>");
$.ajax({
type: "POST",
url: url,
success: function(data){
var list = $(data).find("result").text();
var pk = $(data).find("pk").text();
var value =$(data).find("value").text;
$(data).find("item").each(function(i,e){
var Pk = $(e).find("pk").text();
var values = $(e).find("value").text();
//可用option与opt做对比
var option = $('<option value="'+Pk+'">'+values+'</option>');
var opt = $('<option />', {
value: Pk,
text: values
});
opt.appendTo($("#Depot_name"));//每次迭代出来一个option的数据就将其拼接到select中
});
storageList.multiselect('refresh');//多选下拉框刷新操作，拼接过后一定需要刷新操作
},
})
// Start 初始化多选下拉框
$("#Depot_name").multiselect({
isOpen:false,
multiple : true,
header : true,
height : 310,
minWidth : 200,
selectedList : 10,// 预设值最多显示10被选中项
hide : [ "explode", 500 ],
noneSelectedText : ['仓库列表'],
close : function() {
var val = $("#Depot_name").val();
$("#Warehouse").val(val);
}
});
$('#Depot_name').multiselect('disable');//禁用多选下拉框
// End 2016-12-23 20:25:59
}这样子初始化过后，就能实现简单的多选下拉了。
四、多选取值：
注：取值处引用博主
翩翩 博文中的方法，详细的请猛戳：
点击打开链接
如果想要获取到多选之后的值则需修改：jQuery.multiselect.js中的update方法
// updates the button text. call refresh() to rebuild
update: function() {
var o = this.options;
var $inputs = this.inputs;
var $checked = $inputs.filter(':checked');
var numChecked = $checked.length;
var value;
if(numChecked === 0) {
value = o.noneSelectedText;
} else {
if($.isFunction(o.selectedText)) {
value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
} else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');
} else {
value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
}
multiValues = $checked.map(function () { return $(this).val(); }).get().join(',');//加上这句
}
this._setButtonValue(value);
return value;
},添加下面这个函数： MyValues:function(){
return multiValues;
},
五、扩展搜索功能：
这个插件貌似没有搜索功能的，如果想要添加搜索功能的话，需要扩展：<script type="text/javascript" src="js/jquery.multiselect.filter.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.multiselect.filter.css" />$("#Depot_name").multiselect().multiselectfilter(); //为多选下拉框添加搜索功能在添加搜索功能的时候，如果头部的不过位置的话，那么就会将“全选”、“全不选”两个按钮给挤下去。所以在初始化的时候可以去掉全选与全不选
$("#Depot_name").multiselect({
isOpen:false,
multiple : true,
header : true,//去掉这个参数就能去掉全选与全部选
height : 310,
minWidth : 200,
selectedList : 10,// 预设值最多显示10被选中项
hide : [ "explode", 500 ],
noneSelectedText : ['仓库列表'],
close : function() {
var val = $("#Depot_name").val();
$("#Warehouse").val(val);
}
}); $.widget("ech.multiselect", {
// default options
options: {
// header: true,
height: 175,
minWidth: 225,
classes: '',
checkAllText: 'Check all',
uncheckAllText: 'Uncheck all',
noneSelectedText: 'Select options',
selectedText: '# selected',
selectedList: 0,
show: null,
hide: null,
autoOpen: false,
multiple: true,
position: {},
appendTo: "body"
},
这样子搜索框就出来了