bootstrap multiselect+thymeleaf下拉多选以及回显

使用bootstrap multiselect+thymeleaf实现下拉多选

    <div class="form-group">    
    <label class="col-sm-3 control-label">添加控制点：</label>
    <div class="col-sm-3">
        <select class="form-control" id="controlIds" name="controlIds"  multiple="multiple">
            <option th:each="auditControl:${auditControlList}"
                    th:value="${auditControl.id}"
                    th:text="${auditControl.controlDescribe}">
            </option>
        </select>
    </div>
</div>

js

<script type="application/javascript" th:src="@{/js/bootstrap-multiselect.js}">
</script>
<link rel="stylesheet" th:href="@{/css/bootstrap-multiselect.css}" type="text/css"/>
<script type="text/javascript">
       $(document).ready(function() {
           $('#controlIds').multiselect();
       });
</script>

bootstrap multiselect+thymeleaf回显

html

div class="form-group"> 
<label class="col-sm-3 control-label">添加控制点：</label>
<div class="col-sm-8">
    <input id="controlIdsValue" th:value="${auditTemplate.controlIds}" class="form-control" type="text">
    <select class="form-control" id="controlIds" name="controlIds"  multiple="multiple">
        <option th:each="auditControl:${auditControlList}"
                th:field="${auditTemplate.controlIds}"
                th:value="${auditControl.id}"
                th:text="${auditControl.controlDescribe}">
        </option>
    </select>
</div>
</div>

•  

js

<script type="application/javascript" th:src="@{/js/bootstrap-multiselect.js}">
    </script>
    <link rel="stylesheet" th:href="@{/css/bootstrap-multiselect.css}" type="text/css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            //控制点字符串类似于1,2,3
            var controlIdsValueStr = $("#controlIdsValue").val();
            //按,拆分成数组
            var controlIdsValueArr = controlIdsValueStr.split(",");
            //如果字符串不为空就进行选中操作
            if (controlIdsValueStr){
                //根据id获取所有option
                var controlOptions = document.getElementById("controlIds");
                //遍历所有option 有与控制点数组中相等的就选中
                for (var i = 0;i<controlOptions.options.length;i++){
                    for (var j = 0; j < controlIdsValueArr.length; j++) {
                        if (controlOptions.options[i].value==controlIdsValueArr[j]){
                            console.log(controlIdsValueArr[j])
                            controlOptions.options[i].selected=true;
                        }
                    }
                }
            }
            //将下拉选变成下拉多选，使其可以选择
            $('#controlIds').multiselect();
        });
    </script>

参考博客 bootstrap multiselect多选问题以及回显

对你有用的话请点个赞