Thymeleaf 下拉框选择

  • 作者: 凯哥Java(公众号:凯哥Java)
  • Thymeleaf语法
  • 时间:2023-11-13 14:11
  • 1740人已阅读
简介 在使用Thymeleaf作为前端页面时候,下拉框怎么处理?1、表单提交<select class="form-control" name="w_sort">    <option value="小型仓库">小型仓库</option>&

🔔🔔好消息!好消息!🔔🔔

 如果您需要注册ChatGPT,想要升级ChatGPT4。凯哥可以代注册ChatGPT账号代升级ChatGPT4

有需要的朋友👉:微信号 kaigejava2022

在使用Thymeleaf作为前端页面时候,下拉框怎么处理?

1、表单提交

<select class="form-control" name="w_sort">
    <option value="小型仓库">小型仓库</option>
    <option value="中型仓库">中型仓库</option>
    <option value="大型仓库">大型仓库</option>
</select>

2、表单回显

<select class="form-control" name="w_sort" required>
    <option th:selected="${ware.w_sort=='小型仓库'}" value="小型仓库">小型仓库</option>
    <option th:selected="${ware.w_sort=='中型仓库'}" value="中型仓库">中型仓库</option>
    <option th:selected="${ware.w_sort=='大型仓库'}" value="大型仓库">大型仓库</option>
</select>

动态写法:

controller层准备需要下拉的数据

model.addAttribute("types", TypeEnum.values());
model.addAttribute("typeCode", typeCode);

页面:

 <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>平台:</label>
            <div class="formControls col-xs-10 col-sm-10">
                <select name="typeCode" lay-search="" class="form-control input1" >
                    <option value="">--请选择平台--</option>
                    <option th:each="item:${types}"
                            th:value="${item.code}"
                            th:selected="${typeCode==item.code}"
                            th:text="${item.message}" value="">
                    </option>
                </select>
            </div>
        </div>

页面展示效果:

3d81ce4f8597fc6e188809b4193f6457.png

TopTop