用Thymeleaf在前台下拉列表取值

Thymeleaf在网上的资源特别少
这两天在做一个springboot的项目 遇到下拉列表框 从后台取值动态获取列表框
我的做法是在项目启动访问index页面的时候 把要需要的列表集合存到session作用域
然后在页面取值 下面贴出代码

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

/**
 * @author MrWang
 * @version v1.0
 * @date 2017/06/26
 * @Description
 */

@Controller
@RequestMapping("/demo")
public class ThymeleafController {


    @RequestMapping("/list")
    public String index(HttpSession session){
        List<Classes> list = new ArrayList<>();
        Classes classes = new Classes();
        classes.setCid("1");
        classes.setCname("高一1班");
        list.add(classes);
        classes.setCid("2");
        classes.setCname("高一2班");
        list.add(classes);
        classes.setCid("3");
        classes.setCname("高一3班");
        list.add(classes);
        session.setAttribute("list",list);
        return "index";
    }

    public static class Classes implements Serializable {
        private String cid;
        private String cname;

        public String getCid() {
            return cid;
        }

        public void setCid(String cid) {
            this.cid = cid;
        }

        public String getCname() {
            return cname;
        }

        public void setCname(String cname) {
            this.cname = cname;
        }
    }

}

这个是在index页面上存入list集合 放在session作用域

前台取值


            <div>
                <select class="form-control" name="cid">
                    <option>请选择班级</option>
                    <option  th:each="list:${session.list}" th:value="${list.cid}" th:text="${list.cname }"></option>
                </select>
            </div>

下面是效果
图片1

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Thymeleaf是一种流行的Java模板引擎,可以帮助我们快速构建Web应用程序。动态下列表通常是在用户选择一个选项时自动更新另一个下列表的选项,Thymeleaf可以很容易地实现这一功能。 具体实现方法是,在html页面中使用Thymeleaf的属性绑定功能将下列表与后端的数据模型绑定起来。然后,在JavaScript中使用jQuery或其他库来处理用户选择事件,根据选择的选项更新另一个下列表。 以下是实现动态下列表的一些示例代码: 1. HTML模板代码 ``` <select id="firstSelect" th:field="*{firstSelect}" onchange="updateSecondSelect()"> <option value="">-- 请选择 --</option> <option th:each="item : ${firstList}" th:value="${item.value}" th:text="${item.label}"></option> </select> <select id="secondSelect" th:field="*{secondSelect}"> <option value="">-- 请选择 --</option> <option th:each="item : ${secondList}" th:value="${item.value}" th:text="${item.label}"></option> </select> ``` 2. JavaScript代码 ``` function updateSecondSelect() { var firstValue = $("#firstSelect").val(); $.ajax({ url: "/updateSecondList", type: "POST", data: {firstValue: firstValue}, success: function(data) { $("#secondSelect").empty(); $.each(data, function(key, value) { $("#secondSelect").append($("<option></option>") .attr("value", value.value).text(value.label)); }); } }); } ``` 3. 后端控制器代码 ``` @PostMapping("/updateSecondList") @ResponseBody public List<OptionItem> updateSecondList(@RequestParam("firstValue") String firstValue) { List<OptionItem> secondList = // 根据firstValue获取对应的secondList return secondList; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值