jQuery行からデータを選択するオプションメニューに変更する

Question

データベースからすべてのユーザーの詳細を表示する管理ページを作成しました。 表は、Spring + Hibernateを使用して作成されます。 オプションメニューの値を選択しようとしましたが、特定の行のユーザー名を選択する方法がわかりません。

後でユーザーロールを変更するためにControllerを呼び出したいとします。

<div class="list"> 
    <table class="table-list"> 
     <tr> 
      <th>Id</th> 
      <th>Username</th> 
      <th>Password</th> 
      <th>Email</th> 
      <th>Roles</th> 
      <th>Change role</th> 
     </tr> 
     <c:forEach var="users" items="${users}"> 
      <tr class="userdetails"> 
       <td><c:out value="${users.id }" /></td> 
       <td class="username"><c:out value="${users.username }" /></td> 
       <td><c:out value="${users.password }" /></td> 
       <td><c:out value="${users.email }" /></td> 
       <c:forEach var="roles" items="${users.usersRoles }"> 
        <td><c:out value="${roles.role }" /></td> 
       </c:forEach> 
       <td><select id="change-role"><c:forEach var='changeRole' 
          items='${roles}'> 

          <option value="${changeRole.role}"><c:out 
            value='${changeRole.role}' /></option> 

         </c:forEach></select></td> 
      </tr> 
     </c:forEach> 
    </table> 
</div> 

Answer 1

あなたは、選択した行のユーザー名とユーザーIDを取得するためにHTML5を使用して

<select id="change-role"> 
    <c:forEach var='changeRole' items='${roles}'> 
     <option value="${changeRole.role}" data-userid="${users.id }" data-username="${users.username }"> 
     <c:out value='${changeRole.role}' /> 
     </option> 
    </c:forEach> 
</select> 

そして、あなたの選択の使用のjqueryの/ javascriptのコードの変更イベントのように、あなたの選択オプションにデータ - 属性を、それを達成することができます

$('#change-role').change(function(e){ 
    var userid=$(this).find('option:selected').data('userid'); 
    var username=$(this).find('option:selected').data('username'); 

    //You code to use Userid and Username 

}); 

Answer 2

ご迷惑をおかけして申し訳ございません。一意でなければならないIDを設定する。愚かな私！ すべて正常に動作します。