在下拉列表值更改时创建 html 表？答案

【问题标题】：Create html table on dropdownlist value change?在下拉列表值更改时创建 html 表？
【发布时间】：2013-08-23 12:17:00
【问题描述】：

我想知道如何在选择下拉列表值时自动刷新页面，并且据此刷新页面时它必须在表格视图中显示来自 DB 的一些值。我知道我要求很多，但我只是想知道一种方法。我正在开发一个由 JAVA EE 平台使用 JSP-Servlets 开发的 Web 应用程序。我刚刚从数据库中获取记录并将它们列出到下拉列表中。现在我想在选择下拉列表项时创建一个表（无提交按钮）。我该怎么做？我应该怎么做？我应该使用 servlet 还是其他方法？我可以发布与它相关的我的 JSP 页面。

STAFF HERE....

  <form action="/ProjectResultServlet" method="post">
   <select name="selectedProject">
   <c:forEach items="${projects}" var="project">
   <option value="${project.code}">${project.desc}"</option>
   </c:forEach>
   </select>
   <input type="submit" value="Order" />
  </form>

    Some Staff here

我的这部分代码正在获取下拉列表并在其中显示它们。现在，当我选择一个项目时，它应该自动刷新并使用来自 DB 的信息创建一个信息表。我知道我应该在 Java 类或 servlet 中创建表以从 jsp 获取它们。我可以做那个编码。我想知道该怎么做？

【问题讨论】：

你的意思是<select name="selectedProject" onchange="this.form.submit()">？
我猜他需要 AJAX
submit() 到底是做什么的？它与servlet或javascript有关？
Javascript。它将提交您的表单，因此调用 ProjectResultServlet 的 doPost() 方法。请参阅此相关问题：How to submit form on change of dropdown list?。
我使用了它，但是当我单击下拉列表的值时。它进入 servlet 并刷新页面，但现在我看不到 doprdown 列表了

标签： java html jsp onchange html-select

【解决方案1】：

这是 AJAX 的示例代码。因此您可以根据您使用的任何语言对其进行修改。

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<br>
<div id="txtHint">Customer info</div>

</body>
</html>

【讨论】：