thymeleaf动态输出下拉列表

下拉框:
设置默认值:th:selected="selected"
循环下拉框列表

<div class="layui-form-item">
    <label class="layui-form-label">
        <span class='x-red'>*</span>商品类型
    </label>
    <div class="layui-input-block">
        <select th:name="goodsTypeName" th:id="goodsTypeName">
            <option th:selected="selected" th:text="${good.goodstype.goodsTypeName}"
                    th:value="${good.goodstype.goodsTypeName}" th:title="原商品类型">
            </option>
            <option th:each="goodsTypeList:${allGoodsType}"
                    th:value="${goodsTypeList.getGoodsTypeName()}"
                    th:text="${goodsTypeList.getGoodsTypeName()}">
            </option>
        </select>
    </div>
</div>

结果:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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; } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值