Question

我编写了一个代码，用于从数据库表中检索数据并显示它。整个表作为arraylist通过servlet传递给jsp页面。在jsp内部..第一个名称显示在下拉框中。目标是从下拉列表中选择一个名称，并在选择名称后显示与该名称对应的其余数据。 Arraylist已正确通过。下拉工作正常。但javascript代码显示其余的不起作用。请在下面的help.code中仅显示一个字段。即，对于id。 output page with dropdown

<body>
<form action="Servletname" method="post" name="searchdatabase">
<%int i=0;
ArrayList<Cust> newlist=(ArrayList<Cust>) request.getAttribute("CusList");
if(newlist.size()>0){
%>

 <table>
 <tr>
 <td> name :</td>
 <td>
 <select id="selectUsers" name="users" onChange='Choice();'>
 <option> </option>
 <%for(Cust c:newlist){ %>
 <option value="<%=c.getCustId()%>"> <%=c.getName() %></option>

 <%}%>
 </select>
 </td></tr>
 <tr>
 <td> id :</td>
 <td>
 <input type="text" id="ids" name="id" >
</td></tr>
</table>
</form>

<script type="text/javascript">
  function Choice() {
            //x = document.getElementById("users");
            y = document.getElementById("selectUsers");
x=y.selectedIndex;

Cust c1= newlist.get(y.selectedIndex);
document.getElementById("ids").value =c.getCustId();
 }
</script>
<%} %>
</body>

Answer 1

您的代码存在一些问题。

首先，不推荐使用scriptlet，应该避免使用它们。请改用JSTL。

其次，您的JavaScript代码无法查看Java代码中使用的任何变量。 Java在服务器上执行，然后一些文本（HTML响应）被发送到浏览器。如果它包含JavaScript，则浏览器会运行JavaScript。

我已经重写了您尝试使用JSTL而不是用于流量控制的scriptlet以及更改JavaScript以获得您似乎尝试的内容所实现的目标：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<form action="Servletname" method="post" name="searchdatabase">
<c:if test="${not empty CusList}">
  <table>
  <tr>
  <td> name :</td>
  <td>
  <select id="selectUsers" name="users" onChange='Choice();'>
  <option> </option>
  <c:forEach items="${CusList}" var="c">
    <option value="${c.custId}"> <c:out value="${c.name}" /></option>
  </c:forEach>
  </select>
  </td></tr>
  <tr>
  <td> id :</td>
  <td>
  <input type="text" id="ids" name="id" value="${CusList[0].custId}" >
  </td></tr>
  </table>
  <!-- Note that I've moved the closing form tag and put it outside of this c:if block 
  because putting it here means it will only be output if your List is not empty -->

  <script type="text/javascript">
  function Choice() {
    var y = document.getElementById("selectUsers");
    var x = y.selectedIndex;
    document.getElementById("ids").value = y.children[x].value;
  }
  </script>
</c:if>
</form><!-- outside of c:if because the opening tag is also outside of c:if -->
</body>

修改

我刚刚重新阅读了这个问题，并意识到我还没有满足您使用客户的其他属性填充其他输入的额外需求。

正如我上面所说，JavaScript无法查看服务器上的数据，包括您的Customer对象列表。有几种选择，但我推荐这两种选择：

使用HTML5数据属性

HTML5为可以通过脚本访问的元素引入了data-* attributes。例如，你可以这样做：

<c:forEach items="${CusList}" var="c"> <option value="${c.custId}" data-surname="<c:out value="${c.surname}" />" data-tel="<c:out value="${c.tel}" />"> <c:out value="${c.name}" /> </option> </c:forEach>

然后在JavaScript中：

function Choice() { var y = document.getElementById("selectUsers"); var x = y.selectedIndex; var opt = y.children[x]; document.getElementById("ids").value = opt.value; document.getElementById("surname").value = opt.dataset.surname; document.getElementById("tel").value = opt.dataset.tel; // etc }

这种方法的缺点是，如果你有一个大型列表，你想要提供大量的属性，那么响应中有很多文本。

使用AJAX

您可以响应select更改进行AJAX调用，并让服务器返回以JSON格式编码的客户数据。然后，JavaScript将解码JSON并使用正确的值填充元素。

您需要研究如何执行此操作（有大量教程可用），但响应您的选择更改的步骤将是：

在从服务器获取AJAX响应之前，禁用选择框以防止其他更改

显示某种悸动以向用户表明正在加载数据

发出指示所选客户ID的AJAX请求

服务器使用相应客户对象的JSON编码版本进行响应。

使用JSON数据更新输入。

隐藏throbber并重新启用select元素。

这种方法的缺点是你需要学习如何正确使用AJAX，包括添加代码来处理错误（例如，如果用户失去网络连接而你没有得到服务器对你的AJAX的响应请求，您需要显示错误消息并具有某种＆＃34;重试＆＃34;机制）。

javascript没有在jsp页面中显示

1 个答案: