title: Calling Javascript from jsp onchange of a dropdown value
body: <p>I have a list of group and in each group I have a list of members. In <code>jsp</code> each group is shown in a row of table and each row contains a <code>dropdown</code> of members. Please see the image below -</p>
  
  <p><img src="https://i.stack.imgur.com/ANRZu.png" alt="enter image description here"> </p>
  
  <p>What I am trying to do is - if I select a member from the <code>dropdown</code> then it's <code>onchange</code> 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).</p>
  
  <p>In the first <code>dropdown</code> there are some members - razib, syeful, proshanto. If I select a member from the first <code>dropdwon</code> then the member id is shown properly in the alert. But if I select any member from the other <code>dropdwon</code> (displaying the member name bulbul and rony) then the <code>javascript</code> function is not triggered. Can any one help me what are the problems with the code - </p>
  
  <p>The jsp snippet - </p>
  
  <pre><code>&lt;select id="userSelect" name="user"&gt;
      &lt;c:forEach items="${group.users}" var="user" varStatus="status"&gt;
          &lt;option id="aUser" value="${user.id}"&gt; &lt;c:out value="${user.name}"/&gt; &lt;/option&gt;
      &lt;/c:forEach&gt;                
  &lt;/select&gt;
  </code></pre>
  
  <p>And the <code>javascript</code> snippet is - </p>
  
  <pre><code>$(document).ready(function() {
  
      $('#userSelect').change(function(event) {
          var userId = $("select#userSelect").val();
          alert("User ID :"+userId);
      });//change()               
  
  }); //document.ready()
  </code></pre>
  
  <p>Thanks in advance</p>
  
  <p><strong>UPDATE:</strong> The answer given by <a href="https://stackoverflow.com/users/2790364/san-krish">San Krish</a> and <a href="https://stackoverflow.com/users/2943218/carsten-l%C3%B8vbo-andersen">Carsten Løvbo Andersen</a> works for a single single id of <code>&lt;select&gt;</code>. But I have multiple <code>&lt;select&gt;</code> 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 <code>&lt;select&gt;</code> actually in my code- </p>
  
  <pre><code>&lt;c:forEach id="groupId" var="group" items="${groupListForm.groups}" varStatus="status"&gt;
      &lt;select id="userSelect" name="user"&gt;
          &lt;c:forEach items="${group.users}" var="user" varStatus="status"&gt;
              &lt;option id="aUser" value="${user.id}"&gt; &lt;c:out value="${user.name}"/&lt;/option&gt;
          &lt;/c:forEach&gt;                
      &lt;/select&gt;
  &lt;/c:forEach&gt;
  </code></pre>
  
  <p>The earlier given answer is OK for a single <code>&lt;select&gt;</code>. But I think the problem is the <code>&lt;select&gt;</code> is also in a for each loop and there are multiple <code>&lt;select&gt;</code> with the same id/class. In this case how can I solve the problem? Thanks again.</p>