HTMX+SpringBoot+Thymeleaf中Select值无法传递至Controller问题

问题根源 #

1. HTMX的hx-include语法错误：你使用了#range.value作为选择器，这是无效的——HTMX需要直接指定元素的ID选择器（如#range），它会自动提取该元素的value值。
2. Select元素缺少name属性：Spring MVC通过请求参数的name属性匹配模型类的字段，你的<select>没有设置name="range"，导致后端无法将参数映射到RequestData的range属性。

具体修改步骤 #

1. 修正Submit按钮的hx-include属性

将原代码中的submit按钮修改为：

<input type="submit" id="submit" class="btn btn-primary"
    th:hx-post="@{/formData}" hx-include="#range"
    hx-trigger="click" hx-target="#tbody" hx-swap="innerHTML" />

2. 给Select元素添加name属性

将原代码中的select标签修改为：

<select id="range" name="range" class="input-group form-select-sm"
    aria-label=".form-select-sm example">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
</select>

修改后验证 #

重新运行后，提交表单时HTMX会自动将表单的日期范围和Select的选中值一起发送到后端，Spring Boot的Controller就能正确接收range参数，运行结果会类似：

Form Data : RequestData [startDate=2023-06-01T11:50, endDate=2023-06-03T11:50, range=10]

内容的提问来源于stack exchange，提问作者Vinay Mhatre