thymeleaf下拉框多选回显

简介: thymeleaf下拉框多选回显

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


相关文章
|
2月前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
87 0
|
12月前
|
Java Maven 数据安全/隐私保护
一个简单的自定义输入框
今天还是一篇关于自定义View相关的,带来一个大众的,常见的一个输入框,很多的场合下都能遇到,比如验证码,密码框等等,配置了很多常见的属性,可以满足不同场合下的需求,矩形框,圆角框,下划线等等均可满足,长度设置,光标选择,背景选择,均可控制。
|
2月前
|
前端开发
Element常用组件—表格、表单、对话框和分页工具条
Element常用组件—表格、表单、对话框和分页工具条
51 0
|
8月前
|
JavaScript 前端开发
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
62 0
|
8月前
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
254 0
|
9月前
64EasyUI 表单 - 格式化下拉框
64EasyUI 表单 - 格式化下拉框
23 0
|
API
Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑
Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑
182 0
Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑
|
前端开发 JavaScript
laravel-admin1.* select2下拉单选组件搜索框无法输入问题解决
laravel-admin1.* select2下拉单选组件搜索框无法输入问题解决
292 0
laravel-admin1.* select2下拉单选组件搜索框无法输入问题解决
【Layui】关于单选框的选中状态,下拉框默认显示
【Layui】关于单选框的选中状态,下拉框默认显示
611 0
【Layui】关于单选框的选中状态,下拉框默认显示