thymeleaf下拉框多選回顯下拉框多選

thymeleaf下拉框多選回顯

• 下拉框多選

• • add.html
  • 新增--背景代碼
  • 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);      

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