bootstrap multiselect多选问题以及回显

bootstrap multiselect多选问题以及回显

1.因为该插件基于jQuery和Bootstrap，先引用jquery；然后引用插件所需的js和css文件。

https://blog.csdn.net/someby/article/details/76295947这个里面是相应的jquery地址路径。

代码

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<%-- <script type="text/javascript"
src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>  但是我加上这个的话 出现下拉框不能下拉的情况--%>

<link href="${pageContext.request.contextPath}/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript"

src="${pageContext.request.contextPath}/js/bootstrap-multiselect.js"></script>

2.在下拉框上边添加 multiple="multiple" 来设置是多选

如代码

<input type="hidden" class="form-control" placeholder="输入事由"name="s_payType" id="s_payType" value="${s_payType}">

 <label for="" class="label-middle">支付方式</label>

                   <select name="s_payTyped" id="s_payTyped" multiple="multiple">
                     <option <c:if test="${s_payType == 4 }">selected="selected"</c:if> value="4">免费</option>
                     <option <c:if test="${s_payType == 3 }">selected="selected"</c:if> value="3">线下支付</option>
                     <option <c:if test="${s_payType == 2 }">selected="selected"</c:if> value="2">线上微信</option>
                     <option <c:if test="${s_payType == 1 }">selected="selected"</c:if> value="1">线上支付宝</option>
                     <option <c:if test="${s_payType == 5 }">selected="selected"</c:if> value="5">线下班</option>
                           </select>

3.调用插件

$(document).ready(function(){
    $("#s_payTyped").multiselect("destroy").multiselect({  
                // 自定义参数，按自己需求定义  
                nonSelectedText : '--请选择--',   
                maxHeight : 350,   
                includeSelectAllOption : true,   
                numberDisplayed : 1  
            });      

var str=$("#s_payType").val();
if(str){
var rtype=document.getElementById("s_payTyped");
for(var i=0;i<rtype.options.length;i++){
          for(var j=0;j<str.length;j++){
                if(rtype.options[i].value==str[j]){
                      rtype.options[i].selected=true;
                          }
                      }
                  }
}
$("#s_payTyped").multiselect('refresh');
});

这里的代码用到了$("#s_payTyped").multiselect("destroy").multiselect这个代码是打破原来的样式 并且来设置新的样式属性

var objType = $("#s_objType").val();
if(s_objType){
getObjMsgByObjType_search();
    var str=$("#s_objId").val();
    var arr=str.split(",")
if(str){
var rtype=document.getElementById("s_objIds");
for(var i=0;i<rtype.options.length;i++){
          for(var j=0;j<arr.length;j++){
                if(rtype.options[i].value==arr[j]){
                      rtype.options[i].selected=true;
                          }
                      }
                  }
}

}

这个代码是来设置回显赋值问题 把从后端传过来的值来与option进行比较进行回显 

但是这里是有问题的 这里会出现会显的值里面存在 但是不会回显出来 

所以这里需要$("#s_objIds").multiselect('refresh');此代码进行回显刷新

参考地址 https://blog.csdn.net/he15101042018/article/details/79849983