Javascript를 사용하여 선택한 목록 항목을 얻는 방법?

Question

내 데이터베이스의 내용 목록을 응용 프로그램에 표시합니다. 데이터베이스에서 레코드를 가져 와서 프런트 엔드의 for-each 루프를 반복하고 내용을 표시합니다. 항목 중 하나를 클릭하려고하면 목록의 첫 번째 항목 만 표시됩니다. 아래는 제 코드입니다. 이 문제를 어떻게 극복 할 수 있습니까?

function userselection() 
     { 
      var selecteduser1=document.getElementById("lbl_user").innerHTML; 
      document.writeln(selecteduser1); 
     } 

<div style="border: 2px solid activeborder;width:300px;height: 400px;border-radius: 5px;"> 
        <ul id="userlist" style="text-align: left;"> 
         <c:forEach items="${list_onlineusers}" var="userslist"> 
          <li id="li_user" style="list-style-image: url(images/online.png);cursor: pointer;height: 25px;margin-left: 0;margin-right: 10%;margin-top: 0.5em;margin-bottom: 7%;" value="${userslist}"> 
           <label onmousedown="userselection()" id="lbl_user" style="font-family:Trebuchet MS,Times,serif;color: black;font-size: 16px;cursor: pointer;"> 
            ${userslist} 
           </label> 
          </li> 
         </c:forEach> 
        </ul> 
       </div> 

Answer 1

모든 선택 항목에 'lbl_user'ID가 사용됩니다.

var selecteduser1=document.getElementById("lbl_user").innerHTML; 

이 호출 될 때 모든 항목이 동일한 ID를 공유하므로 사용 가능한 첫 번째 ID 만 가져옵니다. 대신 각 항목에 고유 한 ID를 할당하십시오.

가 또는 함수에서, 단순히 수행 루프 뷰에 & ID = "lbl_user"ID = "li_user"의 배수 ID를 생성합니다과 같이 반복

function userselection(){ 
    var selecteduser1=this.innerHTML; 
    document.writeln(selecteduser1); 
} 

Answer 2

잘못 수행되는하지 않습니다 고유해야합니다. 먼저 수정했습니다.

Answer 3

정의 및 ID의 사용

id 속성은 국지적 id 속성은 기껏 가리키는 데 사용되는 HTML 요소 (값이 HTML 문서 내에서 유일해야 함)에 대한 고유 ID를 지정 스타일 시트에 스타일을 지정하고 HTML DOM을 통해 JavaScript를 사용하여 특정 ID로 요소를 조작 할 수 있습니다.

목록의 모든 항목에 동일한 ID를 사용하고 있습니다. 루프 카운트를 ID에 추가하려면 <c:forEach> 루프를 약간 변경해야합니다. 그래서 각 항목에는 고유 한 ID가 있습니다. 아래 코드를 변경하십시오

<c:forEach items="${list_onlineusers}" var="userslist" varStatus="count"> 
    <li id="li_user${count.index}" value="${userslist}"> 
     <label onmousedown="userselection()" id="lbl_user${count.index}"> 
      ${userslist} 
     </label> 
    </li> 
</c:forEach> 

위의 변경 사항은 각 항목에 고유 한 ID를 설정합니다. 이제 eventListener를 문서에 등록 할 때 클릭 한 항목의 고유 ID를 전달하고 원하는 것을 수행 할 수 있습니다. 먼저, 문서의 모든 요소에 대해 고유 한 ID가 있는지 확인해야합니다.

참고 : 나는 안녕하세요 자바 스크립트를 사용하지 않고 시도 할 수 readablity에게

Answer 4

을 향상시키기 위해 HTML에서 인라인 CSS 스타일 속성을 제거했습니다. 이처럼

List<String> list = (List<String>) s; 
{ 
    %> 
<tr> 
<td>MobileCode</td> 
<td>Company</td> 
<td>Camera</td> 

<% 
for (String p : list) { 
%> 
<tr> 
<td><%=p.getMn()%></td> 
<td><%=p.getCmnm()%></td> 
<td><%=p.getCmr()%></td> 

<td><a href="xyz`enter code here.jsp?mn=<%=p.getMn()%>" 
onClick="return confirm('Are you sure for Delete')">Delete</a></td> 
</tr> 
<% 
} 
} 
} 
enter code here 

} 
%> 
</table> 

.