Solution 1 :

Use onchange event on select tag instead of onclick.

<select th_onchange="'window.location.href = '' + @{/ingredient} + '?size=' + this.value ' ">
    <option th_each="size : ${pageSizes}" th_text=${size}  ></option>
</select>

Problem :

I’m trying to redirect my page when selecting an Option on a Select using Thymeleaf. My code is written as follows:

<select>
    <option th_each="size : ${pageSizes}" th_text=${size}  th_onclick="'window.location.href = '' + @{/ingredient(size=${size})} + '''"></option>
</select>

And, after inspecting it on Google Chrome, the HTML created is:

<select>
    <option onclick="window.location.href = '/ingredient?size=5'">5</option>
    <option onclick="window.location.href = '/ingredient?size=10'">10</option>
    <option onclick="window.location.href = '/ingredient?size=20'">20</option>
    <option onclick="window.location.href = '/ingredient?size=25'">25</option>
    <option onclick="window.location.href = '/ingredient?size=50'">50</option>
</select>

But nothing happens when a select a new Option. What am I doing wrong?

By