使用 AJAX 更改先前的选择值后动态更新选择

Question

我知道这是一个反复出现的问题，适用于所有 Web 编程语言。我花了五个小时尝试应用此处找到的解决方案但没有成功，这就是我写这个问题的原因。

我想要什么：

• 我有两个选择器，加载页面的时候都是直接从数据库中填充信息成功的。

• 如果我从第一个选择器 (selectSchraubfall) 中选择一个选项，我希望第二个选择器 (selectWorkplace) 更新，只显示第一个选择器的可能结果。

我做了什么：

• 在 jsp 中创建选择器，从执行 sql 查询的 servlet 获取信息✔。
• 为第一个选择器 ✔ 创建了 onChange 事件监听器。
• 使用 Ajax 调用创建了一个 js 函数，以从控制器进行新查询并为第二个选择 ✔ 获取过滤的选项列表。
• 在成功函数中，我尝试通过 .html() 将 Ajax 调用的结果注入到第二个选择中，但它不起作用。如何注入 JSTL？换句话说，如何在 selectWorkplace 中注入 wpFilteredList 的内容？ ✕

我尝试了什么：

• 使用 JSON -> 无效 ✕
• 在 JSP 中使用 JAVA 脚本 -> 无效 ✕

JSP

html:

<div class="row">
    <div class="col-md">
        <label style="font-size: 20px;">Schraubfall ID: </label>
        <select id="selectSchraubfall" name="selectSchraubfall" form="formResult" class="form-control" >
            <option>Select ID</option>
            <c:forEach items="${screwdriverlist}" var="screwdriverlist">
                <option><c:out value="${screwdriverlist.screwdriverid}" /></option>
            </c:forEach>
        </select>
    </div>
    <div class="col-md">
        <label style="font-size: 20px;">Workplace: </label>
        <select id="selectWorkplace" name="selectWorkplace" form="formResult" class="form-control">
            <option>Select workplace</option>
            <c:forEach items="${workplaceList}" var="workplaceList">
                <option><c:out value="${workplaceList.workplacename}" /></option>
            </c:forEach>
        </select>
    </div>
</div>

JS：

var options="";
$("#selectSchraubfall").on('change',function(){
    var value=$(this).val();
    resultSelectValue('Schraubfall', value);
});



function resultSelectValue(columnName, value) {
    // Statements
    var params = {};
        params.colname = columnName;
        params.valuecol = value;

    $.ajax({
            type: "GET",
            url: 'ResultSelectValuesController',
            data: params,
            success: function (data) {
                var workplaceArray = [];
                $("#selectWorkplace").empty().html();

                <c:forEach items="${wpFilteredList}" var="wpFilteredList">
                    //<option value="${wpFilteredList.name}"></option>
                    workplaceArray.push('"${wpFilteredList.name}"');
                </c:forEach>

                $("#selectWorkplace").html(workplaceArray); //I know this is not correct but how can I do something similar using the wpFilteredList?

            },
            error : function(ex) {
                swal("Error", "Error loading workplace info " + ex.Message, "error");
            }
        });
}

Java (ResultSelectValuesController)

@Override
public void processMethodGET(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {
        String colname = request.getParameter("colname");
        String valuecol = request.getParameter("valuecol");

        if(colname.contains("Schraubfall")) {
            //GET WORKPLACES
            workplacesfilteredlist = wcdao.workplacesListFilter(colname, valuecol);
            request.setAttribute("wpFilteredList", workplacesfilteredlist);
        }

        request.getRequestDispatcher("/Views/Results/ResultPage.jsp").forward(request, response);
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        processError(e, request, response);
    }
}

Answer 1

最后我自己解决了这个问题，它使用 Gson 工作。基本上，我返回一个数组数组，并在 JSP 中根据需要操作数据。

现在的代码：

JSP

function resultSelectValue(columnName, value) {
// Statements
var params = {};
    params.colname = columnName;
    params.valuecol = value;

$.ajax({
        type: "GET",
        url: 'ResultSelectValuesController',
        data: params,
        success: function (data) {
            $( "#selectWorkplace" ).empty();
            $( "#selectSchraubfall").empty();

            var htmlWorkplace = "<option>Seleccionar Workplace</option>";
            var htmlsf = "<option>Todos los Schraubfalls</option>";
            for (i = 0; i < data.length; i++) {
                for(j = 0; j < data[i].length; j++){
                    alert(data[i][j]);
                    if(i == 0) {
                        htmlWorkplace += "<option>"+data[i][j]+"</option>";
                    }
                    if(i == 1){
                        if(data[i][j] != 'null' &&  data[i][j] != null){
                            htmlsf += "<option>"+data[i][j]+"</option>";
                        }
                    }
                }
            }

            $( "#selectWorkplace" ).html(htmlWorkplace);
            $( "#selectSchraubfall").html(htmlsf);

JAVA

@Override
public void processMethodGET(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {

        response.setContentType("application/json");
        String colname = request.getParameter("colname");
        String valuecol = request.getParameter("valuecol");

        if(colname.contains("Atornillador")) {

            //GET WORKPLACES
            wpfilteredlist = wcdao.workplacesListFilter(colname, valuecol);

            //GET SF
            sffilteredlist = sfdao.SFListFiltered(colname, valuecol);


            ArrayList<ArrayList<String>> listGet = new ArrayList<ArrayList<String>>();

            ArrayList<String> wpList = new ArrayList<String>();
            ArrayList<String> sfLista = new ArrayList<String>();



            for (int i = 0; i < wpfilteredlist.size(); i++) {
                wpList.add(wpfilteredlist.get(i).getName());
            }

            for(int i = 0; i < sffilteredlist.size(); i++) {
                sfList.add(sffilteredlist.get(i).getSfname());
            }

            listGet.add(wpList);
            listGet.add(sfList);

            Gson gson = new Gson();
            JsonElement element = gson.toJsonTree(listGet);
            PrintWriter out = response.getWriter();
            out.print(element);

        }
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        processError(e, request, response);
    }
}

Answer 2

下面的块是 JSTL 服务器端插值。 Javascript 无法处理此语法。 您需要将下面的 JSTL 代码替换为 javascript 版本，该版本将 ajax 请求响应中的数据推送到 workspaceArray。

                <c:forEach items="${wpFilteredList}" var="wpFilteredList">
                    //<option value="${wpFilteredList.name}"></option>
                    workplaceArray.push('"${wpFilteredList.name}"');
                </c:forEach>

下面的代码是将新数据作为选项元素添加到选择元素。您需要将数据替换为您的响应类型。

data.forEach(workplace => {
    $('#selectWorkplace').append($('<option>', {
       value: workplace,
       text: workplace
    })
})

更改后您不再需要以下代码。

$("#selectWorkplace").html(workplaceArray);