JSP Ajax populate drop down list based on the selected value

后端未结

关注

 1  360

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 us

相关标签:

1条回答

梦谈多话

2020-12-22 09:34

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...

The HTML page:

<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...

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

0 讨论(0)