Jquery multiselect 多选下拉框与ajax配合使用，动态拼接option。初始化默认选中多个，增加搜索框

近期公司业务需求，需要使用到多选下拉框。因为项目使用的是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,  

 text: values  
 });  
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" />
需要下载扩展功能外部js的请猛戳：点击打开链接
$("#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);}});

如果上面操作后还不行的话，就可以直接修改jQuery.multiselect.js的代码，下面的这段代码是在叫前面的

  $.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"    },

这样子搜索框就出来了