Thymeleaf передает объект в javascript и получает доступ к его свойствам: undefined

Question

Я потратил много часов на изучение этого и применил все решения, но не могу заставить мой код работать.У меня есть select, который содержит объект как значение (не может измениться из-за привязки данных), он вызывает функцию js, которая обращается к свойству id объекта, содержащегося в атрибуте value, но возвращает undefined.Есть ли способ получить доступ к этому.Я попытался JSON.parse и JSON.stringify и комбинацию 2 на объекте без успеха.

вот мой выбор:

<select th:field="*{category}" class="custom-select" id="category" style="padding: 0px" onchange="getInstitutions()">
       <option value="a" selected>select one..</i></option>
       <option th:each="category : ${categories}"
                    th:value="${category}"
                    th:text="${category.name}"
                    th:data="${category.id}"
                    selected></option>
</select>

Вот моя функция JS:

function getInstitutions() {
    var cat = $("#category").val();
    //cat=JSON.stringify(cat);
    var catId=cat.id;
    alert(catId); // undefined
    // use id to query db using ajax...
}