JSP Ajax 根据所选值填充下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8643096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSP Ajax populate drop down list based on the selected value
提问by user236501
I have a drop down list will retrieve all product category from database and populate, another drop down list will show the product name based on the category selected by user.I am able to populate category but I was stuck at the product part
我有一个下拉列表将从数据库中检索所有产品类别并填充，另一个下拉列表将根据用户选择的类别显示产品名称。我能够填充类别，但我被困在产品部分
<p>
<label for="pcategory">Product Category</label>
<select name="pcategory" size="0" onchange="get_product(this.selectedIndex);">
<%
Category cat = new Category();
java.util.ArrayList<Category> catList = cat.retrieveCategory();
for (int i = 0; i < catList.size(); i++) {
%>
<option value="<%=(i + 1)%>"><%=catList.get(i).getCatname()%></option>
<%
}
%>
</select>
</p>
<jsp:include page="data.jsp"/>
function get_product(category){
$.ajax({
type: "GET",
url: "data.jsp",
data: "category=" + category,
success: function(msg){
}
});
}
This is for data.jsp
这是用于 data.jsp
<p>
<label for="pname">Product Name:</label>
<select name="state" id="state">
<%
if (request.getParameter("category") != null) {
%>
<option value="1">1</option>
<option value="2">2</option>
<% } else {
%>
<option value="1">2</option>
<option value="2">3</option>
<% }%>
</select>
my data.jsp will populate the product name. By default will populate the first category from database if user never change the category drop down list.
我的 data.jsp 将填充产品名称。如果用户从不更改类别下拉列表，则默认情况下将从数据库填充第一个类别。
回答by Zack Macomber
I was able to do the following simple example using a servlet to get product names based on a product category. You'll need to modify it a little bit to fit into your particular scenario. Let me know if this is helpful and puts you down the right path...
我能够使用 servlet 执行以下简单示例，以根据产品类别获取产品名称。您需要稍微修改它以适应您的特定场景。让我知道这是否有帮助并让您走上正确的道路...
The HTML page:
HTML页面：
<html>
<head>
<SCRIPT SRC="jquery.js" TYPE="text/javascript"></SCRIPT>
</head>
<body>
<p>
<label for="pcategory">Product Category</label>
<select name="pcategory" id="pcategory" size="0">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
</p>
<p>
<label for="pname">Product Name:</label>
<select name="state" id="state">
<option value="1">Product Name 1 For Category 1</option>
<option value="2">Product Name 2 For Category 1</option>
<option value="3">Product Name 3 For Category 1</option>
</select>
</p>
</body>
<script type="text/javascript">
$category = $('#pcategory');
$category.change (
function() {
$.ajax({
type: "GET",
url: "GetProductName",
data: {category: $category.attr("selectedIndex") },
success: function(data){
$("#state").html(data)
}
});
}
);
</script>
</html>
The servlet which will give you the product names...
将为您提供产品名称的 servlet...
import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
public class GetProductName extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
int category = Integer.parseInt(request.getParameter("category"));
switch (category) {
case 1:
out.print(
"<option value='1'>Product Name 1 For Category 2</option>" +
"<option value='2'>Product Name 2 For Category 2</option>" +
"<option value='3'>Product Name 3 For Category 2</option>"
);
break;
case 2:
out.print(
"<option value='1'>Product Name 1 For Category 3</option>" +
"<option value='2'>Product Name 2 For Category 3</option>" +
"<option value='3'>Product Name 3 For Category 3</option>"
);
break;
default:
out.print(
"<option value='1'>Product Name 1 For Category 1</option>" +
"<option value='2'>Product Name 2 For Category 1</option>" +
"<option value='3'>Product Name 3 For Category 1</option>"
);
break;
}
} catch (Exception ex) {
out.print("Error getting product name..." + ex.toString());
}
finally {
out.close();
}
}
}
