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}" th:selected="${detailPlanPrev.needReviewKpIdS.contains(kp.kpId)}"></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" th:selected="${detailPlanPrev.kpMasteryS.contains('1')}">好</option>
			<option value="2" th:selected="${detailPlanPrev.kpMasteryS.contains('2')}">較好</option>
			<option value="3" th:selected="${detailPlanPrev.kpMasteryS.contains('3')}">一般</option>
			<option value="4" th:selected="${detailPlanPrev.kpMasteryS.contains('4')}">差</option>
			<option value="5" th:selected="${detailPlanPrev.kpMasteryS.contains('5')}">較差</option>
			<option value="6" th:selected="${detailPlanPrev.kpMasteryS.contains('6')}">未學習</option>
			<option value="7" th:selected="${detailPlanPrev.kpMasteryS.contains('7')}">待評估</option>
		</select>
	</div>
</div>

編輯–後臺代碼

DetailPlanPrev detailPlanPrev = detailPlanPrevService.selectDetailPlanPrevById(id);
mmap.put("detailPlanPrev", detailPlanPrev);
List<Map> kps = new ArrayList<>();
for (int i = 1; i < 10; i++) {
	Map kpmap = new HashMap(8);
	kpmap.put("kpId",String.valueOf(i));
	kpmap.put("kpName","知識點"+i);
	kps.add(kpmap);
}
mmap.put("kps",kps);