Dropdown using HTMX with call to database and Spring endpoint

Question

I have following simple dropdown defined using htmx:

<div>
    <select name="region" id="regionSelect" hx-get="/regions" hx-trigger="change">
        <option th:each="region : ${regions}" th:value="${region.code}" th:text="${region.name}"></option>
    </select>
</div>

with endpoint /regions (@RestController to return JSON):

 @GetMapping("/regions")
fun getRegions(): List<RegionLookupV> {
    val regions = nbrsRetrievalService.getRegions()
    return regions
}

However when I load the html nothing appears on the dropdown. Please help

Answer 1

change the html as follows:

      <select name="region" id="regionSelect" hx-trigger="change">
        <option th:each="region : ${regions}" th:value="${region.code}" th:text="${region.name}"></option>
    </select>
</div>

and passed regions from @Controller

  @GetMapping("/launch")
fun launchnbrs(model: Model): String{
    val regions = retrievalService.getRegions()
    model.addAttribute("regions", regions)
    return "launch"
}