I have a list of group and in each group I have a list of members. In jsp each group is shown in a row of table and each row contains a dropdown of members. Please see the image below -

What I am trying to do is - if I select a member from the dropdown then it's onchange trigger a javascript function and the user Id is shown in an alert.(for test purpose I'm now using alert, later I use the userId/member ID for other task).

In the first dropdown there are some members - razib, syeful, proshanto. If I select a member from the first dropdwon then the member id is shown properly in the alert. But if I select any member from the other dropdwon (displaying the member name bulbul and rony) then the javascript function is not triggered. Can any one help me what are the problems with the code -

The jsp snippet -

<select id="userSelect" name="user">
    <c:forEach items="${group.users}" var="user" varStatus="status">
        <option id="aUser" value="${user.id}"> <c:out value="${user.name}"/> </option>
    </c:forEach>                
</select>

And the javascript snippet is -

$(document).ready(function() {

    $('#userSelect').change(function(event) {
        var userId = $("select#userSelect").val();
        alert("User ID :"+userId);
    });//change()               

}); //document.ready()

Thanks in advance

UPDATE: The answer given by San Krish and Carsten Løvbo Andersen works for a single single id of <select>. But I have multiple <select> with the id "userSeelct" because this is in a forEach loop. If I use class instead of ID then it is also not working.Please see How the <select> actually in my code-

<c:forEach id="groupId" var="group" items="${groupListForm.groups}" varStatus="status">
    <select id="userSelect" name="user">
        <c:forEach items="${group.users}" var="user" varStatus="status">
            <option id="aUser" value="${user.id}"> <c:out value="${user.name}"/</option>
        </c:forEach>                
    </select>
</c:forEach>

The earlier given answer is OK for a single <select>. But I think the problem is the <select> is also in a for each loop and there are multiple <select> with the same id/class. In this case how can I solve the problem? Thanks again.

I have a list of group and in each group I have a list of members. In jsp each group is shown in a row of table and each row contains a dropdown of members. Please see the image below -

What I am trying to do is - if I select a member from the dropdown then it's onchange trigger a javascript function and the user Id is shown in an alert.(for test purpose I'm now using alert, later I use the userId/member ID for other task).

In the first dropdown there are some members - razib, syeful, proshanto. If I select a member from the first dropdwon then the member id is shown properly in the alert. But if I select any member from the other dropdwon (displaying the member name bulbul and rony) then the javascript function is not triggered. Can any one help me what are the problems with the code -

The jsp snippet -

<select id="userSelect" name="user">
    <c:forEach items="${group.users}" var="user" varStatus="status">
        <option id="aUser" value="${user.id}"> <c:out value="${user.name}"/> </option>
    </c:forEach>                
</select>

And the javascript snippet is -

$(document).ready(function() {

    $('#userSelect').change(function(event) {
        var userId = $("select#userSelect").val();
        alert("User ID :"+userId);
    });//change()               

}); //document.ready()

Thanks in advance

UPDATE: The answer given by San Krish and Carsten Løvbo Andersen works for a single single id of <select>. But I have multiple <select> with the id "userSeelct" because this is in a forEach loop. If I use class instead of ID then it is also not working.Please see How the <select> actually in my code-

<c:forEach id="groupId" var="group" items="${groupListForm.groups}" varStatus="status">
    <select id="userSelect" name="user">
        <c:forEach items="${group.users}" var="user" varStatus="status">
            <option id="aUser" value="${user.id}"> <c:out value="${user.name}"/</option>
        </c:forEach>                
    </select>
</c:forEach>

The earlier given answer is OK for a single <select>. But I think the problem is the <select> is also in a for each loop and there are multiple <select> with the same id/class. In this case how can I solve the problem? Thanks again.

• javascript
• jquery
• jsp
• foreach
• jstl

2 Answers 2

You can simply do it as,

 $(document).ready(function() {
    $('#userSelect').on('change', function() {
      alert( this.value ); // or $(this).val()
    });
});

You can do something like this.

$("#userSelect").on("change", function() {
   alert( this.value );
});

This should solve your problem!