thymeleaf动态渲染select

本文介绍如何使用Thymeleaf模板引擎在HTML中动态生成带有预选值的下拉菜单,通过解析JSON数据实现选项的自动填充。
<option th:selected="${res.selected eq option.id}"
        th:each="option : ${res.data}"
th:value="${option.id}" th:text="${option.value}"></option>

json数据:

{
    "selected": "1",
    "data":[
        {
            "id": "1",
            "value": "选项1"
        },
        {
            "id": 2,
            "value": "选项2"
        }
    ]
}

controller:

modelMap.addAttribute("res",上面的json数据);


th:selected="${res.selected eq option.id}" ---- 读取res.selected,如果等于当前选项的值,则设置当前选项被选中

th:each="option : ${res.data}"  ----  遍历res.data,命名为option

th:value="${option.id}"  ----  当前option的value设为json数据集中的id

th:text="${option.value}  ----  当前option的text设为json数据集中的value

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值