thymeleaf下拉框多选回显

六月的雨在Tencent

发布于 2024-03-28 20:37:49

880

发布于 2024-03-28 20:37:49

文章被收录于专栏：CSDNCSDN

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);

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-28，如有侵权请联系 cloudcommunity@tencent.com 删除

select