Question

我的网页上有2个下拉列表。国家列表和省列表。当页面加载时，我的国家/地区列表将从数据库填充，然后从列表中选择一个国家/地区，该国家/地区的省份列表也应该从数据库中填充。

（我正在使用hibernate逆向工程来创建数据库连接文件和bean类e.t.c）

我正在做的是填充国家/地区列表后，我使用jquery脚本获取所选国家/地区的值，然后使用ajax将其传递给控制器类。我将在下面附上。

我面临的问题是，当我从国家/地区列表中选择一个国家/地区时，不会填充省份列表，而是再次打印两个下拉框，省份列表框仍为空。

这是我的jsp文件

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Selection Page</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

</head>
<body>
    <form name="locationSelection" method="POST">

    Select Country:
        <br>
        <select name="countryList" id="countryList">
            <option value="">Select Country</option>
            <c:if test="${!empty countryList}">
                <c:forEach items="${countryList}" var="cont">
                    <option   value=${cont.countryId}>${cont.countryName}</option>
                </c:forEach>
            </c:if>
        </select>
        <br><br>

        <script>
        $(document).ready(function() 
        {
            $("#countryList").change(function() 
            {
                var selectedValue = $(this).find(":selected").val();
                $.ajax
                ({
                    url : "a.html?cID="+selectedValue+'',
                    success : function(result) 
                    {
                        $("#prvContatiner").html(result);
                    }
                });
            });
        });
        </script>

        Select Province:
        <div id="prvContatiner">
            <select name="provinceList" id="provinceList">
                <option value="">Select Province</option>
                      <c:if test="${!empty provinceList}">
                <c:forEach items="${provinceList}" var="cont">
                    <option   value=${cont.provinceId}>${cont.provinceDesc}</option>
                </c:forEach>
            </c:if>
        </select> 
            </select>
        </div>

    </form>
</body>

这是我的控制器java类

package controller;

import java.io.IOException;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.TblCountryDAO;
import dao.TblProvinceDAO;

@SuppressWarnings("serial")
public class SelectionController extends HttpServlet {
    void ProcessorRequest(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        String operation = request.getParameter("op");
        System.out.println("Operation: "+operation);
        String cID = request.getParameter("cId");
        if (cID == null) 
        {
            System.out.println(request.getRequestURI());
            TblCountryDAO dao = new TblCountryDAO();
            List<?> countryList = dao.findAll();
            request.setAttribute("countryList", countryList);
            RequestDispatcher reqDispatcher = request.getRequestDispatcher("main.jsp");
            reqDispatcher.forward(request, response);
        }
        else 
        {
            System.out.println("in elseif");

            TblProvinceDAO dao = new TblProvinceDAO();
            List<?> provinceList = dao.findByProperty("tblCountry.countryId", Integer.parseInt(cID));
            request.setAttribute("provinceList", provinceList);
            RequestDispatcher reqDispatcher = request.getRequestDispatcher("main.jsp");
            reqDispatcher.forward(request, response);
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {
        ProcessorRequest(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {
        ProcessorRequest(req, resp);
    }
}

我附加了web.xml文件以防万一

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name></display-name>
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>controller.SelectionController</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/a.html</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

非常感谢任何其他有关完成任务的建议

Answer 1

您正在寻找错误的参数request.getParameter("cId");应request.getParameter("cID");使用cId将返回null值，您将获得main.jsp作为回应

Answer 2

我认为您可以在json

的帮助下切换到另一种方式来完成相同的任务

在控制器中，您将获得省份列表。使用任何一个Json库，如google gson或json.org，并将其转换为像这样的对象的json数组

[{
"id":1,
"name":"Delhi"
},{
...
...
},
...
]

并使用PrintWriter直接打印json数组。

然后在你的ajax成功响应中生成像这样的选项 -

$.ajax
                ({
                    url : "a.html?cID="+selectedValue+'',
                    success : function(result) 
                    {
                        $("#provinceList").html('');
                        for(var i=0;i<result.size;i++){
                            var option = '<option value="'+result[i].id+'">'+result[i].name+'</option>'
                            $("#provinceList").append(option);
                        }
                    }
                });

从数据库加载一个列表，从另一个列表中选择值

2 个答案: