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

Question

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

我想要什么:

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

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

我做了什么:

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

我尝试过的:

• 使用 JSON -> 不起作用 ✕
• 在 JSP 中使用 JAVA scriplet -> 不起作用 ✕

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

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

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