Question

对于所有Web编程语言，我都知道这是一个反复出现的问题。我花了五个小时试图应用这里找到的解决方案而没有成功，这就是为什么我写这个问题。

我想要什么：

我有两个选择器，在加载页面时，两个选择器都直接从数据库成功填充了信息。
如果我从第一个选择器（selectSchraubfall）中选择一个选项，我希望第二个选择器（selectWorkplace）进行更新，仅显示第一个选择器的可能结果。

我做了什么：

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

我尝试过的事情：

使用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

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

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

以下代码将新数据添加到select元素中作为选项元素。您需要替换数据作为响应类型。

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

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

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

Answer 2

最后，我自己解决了这个问题，它使用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);
    }
}

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

2 个答案: