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

ID的定义和用法

id属性指定HTML元素的唯一ID（该值必须在HTML文档中唯一）.id属性最常用于指向样式表中的样式和JavaScript（通过HTML DOM））操纵具有特定id的元素。

您为列表中的所有项目使用相同的ID。您必须稍微更改<c:forEach>循环以将循环计数添加到id。所以，每个项目都有一个唯一的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。现在，您可以将单击注册事件监视器的项目的唯一ID传递给文档，并执行您想要的任何操作。首先，您需要确保文档中的每个元素都有唯一的ID。

注意：我已从HTML中删除了内联CSS样式属性以提高可读性

Answer 2

您正在使用ID＆＃39; lbl_user＆＃39;适用于所有选择;因为所有项目共享相同的ID，

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

调用

，它只获取第一个可用ID。尝试为每个项目分配唯一的ID。

或者，在函数中，只需执行：

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

Answer 3

循环错误，因为你的循环会创建id =“li_user”＆amp;的倍数id。视图上的id =“lbl_user”不是唯一的。先解决了这个问题。

Answer 4

您可以在不使用Java脚本的情况下尝试。

  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>

喜欢这个。

如何使用Javascript获取选定的列表项？

4 个答案: