JSP Ajax根据所选值填充下拉列表

小编典典

JSP Ajax根据所选值填充下拉列表

jsp

我有一个下拉列表将从数据库中检索所有产品类别并进行填充，另一个下拉列表将根据用户选择的类别显示产品名称。我可以填充类别，但被卡在产品部分

 <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

<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将填充产品名称。默认情况下，如果用户从不更改类别下拉列表，则会从数据库填充第一个类别。

阅读 276

2020-06-08

共1个答案

小编典典

我能够使用servlet来完成以下简单示例，以根据产品类别获取产品名称。您需要对其进行一些修改以适合您的特定方案。让我知道这是否有帮助并使您走上正确的道路…

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将为您提供产品名称…

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();
        }
    }
}

2020-06-08