javascript - 从 jsp onchange 的下拉值调用 Javascript

Question

我有一个组列表，在每个组中我都有一个成员列表。在 jsp每个组显示在表格的一行中，每行包含一个 dropdown成员。请看下图-

我想做的是 - 如果我从 dropdown 中选择一个成员然后是onchange触发 javascript 函数，用户 ID 显示在警报中。(出于测试目的，我现在使用警报，稍后我将用户 ID/成员 ID 用于其他任务)。

在第一个dropdown有一些成员 - razib、syeful、proshanto。如果我从第一个 dropdwon 中选择一个成员然后成员 ID 会在警报中正确显示。但是，如果我从其他 dropdwon 中选择任何成员(显示成员名称 bulbul 和 rony)然后是 javascript功能未触发。谁能帮我看看代码有什么问题-

jsp 片段 -

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

还有 javascript片段是 -

$(document).ready(function() {

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

}); //document.ready()

提前致谢

更新 San Krish 给出的答案和 Carsten Løvbo Andersen适用于 <select> 的单个 ID .但是我有多个 <select> id 为“userSeelct”，因为这是在 forEach 循环中。如果我使用类而不是 ID，那么它也不起作用。请参阅如何 <select>实际上在我的代码中-

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

先前给出的答案对于单个 <select> 是可以的.但我认为问题是 <select>也在for each循环中，有多个<select>具有相同的 ID/类。在这种情况下，我该如何解决问题？再次感谢。

Answer 1

你可以简单地这样做，

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