Thymeleaf将对象传递给javascript并访问其属性：undefined

Question

我花了很多时间研究这个问题并应用了所有解决方案，但我的代码无法正常工作。我有一个选择，将对象保留为值（由于数据绑定而无法更改）onchange，它调用一个js函数，该函数访问由value属性持有的对象的id属性，但返回未定义。有没有办法访问这个。我已经尝试对对象进行JSON.parse和JSON.stringify以及两者的组合，但均未成功。

这是我的选择：

<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...
}