thymeleaf下拉框多选回显
下拉框多选
add.html
页面引入css文件 select2.min.css 、 select2-bootstrap.css 、 bootstrap-select.css
引入js文件 select2.min.js 、bootstrap-select.js
页面代码:
<div class="form-group" id="knowledge"> <label class="col-sm-3 control-label is-required">需复习知识点:</label> <div class="col-sm-8"> <select id="needReviewKpIdS" name="needReviewKpIdS" class="form-control select2-multiple" multiple> <option value="">请选择知识点</option> <option th:each="kp:${kps}" th:value="${kp.kpId}"th:text="${kp.kpName}"></option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label is-required">知识点掌握程度:</label> <div class="col-sm-8"> <select id="kpMasteryS" name="kpMasteryS" class="form-control select2-multiple" multiple> <option value="">请选择</option> <option value="1">好</option> <option value="2">较好</option> <option value="3">一般</option> <option value="4">差</option> <option value="5">较差</option> <option value="6">未学习</option> <option value="7">待评估</option> </select> </div> </div>
新增–后台代码
List<Map> kps = new ArrayList<>(); for (int i = 1; i < 10; i++) { Map kpmap = new HashMap(8); kpmap.put("kpId",i); kpmap.put("kpName","知识点"+i); kps.add(kpmap); } mmap.put("kps",kps);
edit.html
页面引入css文件 select2.min.css 、 select2-bootstrap.css 、 bootstrap-select.css
引入js文件 select2.min.js 、bootstrap-select.js
页面代码:
<div class="form-group" id="knowledge"> <label class="col-sm-3 control-label is-required">需复习知识点:</label> <div class="col-sm-8"> <select id="needReviewKpIdS" name="needReviewKpIdS" class="form-control select2-multiple" multiple> <option value="">请选择知识点</option> <option th:each="kp:${kps}" th:value="${kp.kpId}"th:text="${kp.kpName}"></option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label is-required">知识点掌握程度:</label> <div class="col-sm-8"> <select id="kpMasteryS" name="kpMasteryS" class="form-control select2-multiple" multiple> <option value="">请选择</option> <option value="1">好</option> <option value="2">较好</option> <option value="3">一般</option> <option value="4">差</option> <option value="5">较差</option> <option value="6">未学习</option> <option value="7">待评估</option> </select> </div> </div>
编辑–后台代码
List<Map> kps = new ArrayList<>(); for (int i = 1; i < 10; i++) { Map kpmap = new HashMap(8); kpmap.put("kpId",i); kpmap.put("kpName","知识点"+i); kps.add(kpmap); } mmap.put("kps",kps);