Bootstrap Multiselect 动态二联赋值 支持多选

在用Bootstrap Multiselect 动态二联赋值的时候，从后台传来的值，给动态赋值，解决办法，此办法是在网上看了很久，找到一位兄台解决的，此记录作为自己以后复查，

效果图如下:

源码如下:

引入js文件

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-2.1.3/jquery-2.1.3.min.js"></script>

<!-- select2 css js -->
<script src="${pageContext.request.contextPath}/js/jquery/select2/js/select2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery/select2/js/i18n/zh-CN.js"></script>
<link href="${pageContext.request.contextPath}/js/jquery/select2/css/select2.min.css" rel="stylesheet"/>
<!-- multiselect js css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/multiselect/css/bootstrap-3.3.2.min.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/multiselect/js/bootstrap-3.3.2.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/multiselect/css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/multiselect/js/bootstrap-multiselect.js"></script>

jsp中页面源码:

<td  style="width: 350px;padding-left:15px;">
                    省份&nbsp; &nbsp;
                <select id="provinceId" name="provinceId" style="width: 130px;">
                         <option value="">全部</option>
                         <c:forEach items="${provinceList}" var="province">
                        <option value="${province.id}">${province.text}</option>
                    </c:forEach>
                 </select>
                     
                </td>
                
                <td  style="width: 350px;padding-left:15px;">
                    城市&nbsp; &nbsp;
                    <select id="cityId" name="cityId" style="width: 130px;" class="" multiple="multiple"></select>
                </td>

js中的源码:

$(document).ready(function() {

    // 省份
    $('#provinceId').select2({
        "language" : "zh-CN"
    }).on('select2:select', function(data) {
        var selectedValue = $(this).select2(data)[0].value;
        setCity(selectedValue);
    });
    
    $('#cityId').multiselect({
        includeSelectAllOption: true,
        selectAllValue:'select-all-value',
        nonSelectedText:'请选择',
        nSelectedText:'个城市',
        allSelectedText:'全部',
        selectAllText:"全部城市",
        maxHeight: 300
    });
});

function setCity(provinceId) {
    $.ajax({
        type : "POST",
        url : ctx+"/query/city",
        data : "provinceId="+provinceId,
        success : function(jsonData) {
            //此处当省份选择为全部=""的时候的特殊处理
            var citys=provinceId.length==0?"":eval(jsonData);
              $.each(citys, function(index, city) {                
                  $("#cityId").append('<option value="' + city.id + '">' + city.text + '</option>');
              });
              /**
               * Bootstrap Multiselect 动态赋值选项卡 2
               */
             var newCitys = new Array();
              var obj = new Object();
              $.each(citys, function(index, city) {
                  obj = {
                      label : city.text,
                      value : city.id
                  };
                  newCitys.push(obj);
              });
              $("#cityId").multiselect('dataprovider', newCitys);     
              $('#cityId').multiselect('refresh');
        }
    });
}