Pass List in data attribute and access using jquery

Pass List in data attribute and access using jquery


Im currently having a User bean and a Role bean.

Role{
 private String roleName;
 private boolean readOnly;
}

User{
 private String name;
 private int id;
 private List<Role> roles;
}
From the controller i pass the list of users as:

List<User> userList = daoFactory.listUsers();
request.setAttribute("userList ", userList);
In the jsp i have set the options based on the userList

<select id="approvedUserList" class="selectUser" size="5">
    <c:forEach items="${userList}" var="i" varStatus="loopStatus">
        <option data-value="${i.roles}" value="${i.id}"><c:out value="${i.name}"/>
        </option>
    </c:forEach>
</select>
From JQuery i would like to have the values of roles and their readonly values when clicking on any of the option.

$('#approvedUserList').on('change',function(){ 
var selected = $(this).find('option:selected');
var extra = selected.data('value');
});
However im unable to get the roles names and their values for the selected user. Ideally i would want to set the values in a table.