JSP Ajax的填充基于所选择的值下拉列表 [英] JSP Ajax populate drop down list based on the selected value
问题描述
我有一个下拉列表将检索数据库中的所有产品类别和填充，另一个下拉列表中会显示由user.I选择基于类别的产品名称很能填充类，但我被困在产品部件
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){
}
});
}
这是data.jsp
This is for 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>
我data.jsp将填充的产品名称。默认情况下将填充从数据库中的第一类，如果用户永远不变的类别下拉列表中。
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.
推荐答案
我可以用一个servlet来获得基于产品品类产品名称做以下简单的例子。你需要修改它一点点地适应您的特定情况。让我知道这是有益的，让你沿着正确的道路......
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...
的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>
这将给你的产品名称......这个servlet
The servlet which will give you the product names...
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();
}
}
}
这篇关于JSP Ajax的填充基于所选择的值下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
