Question

正如您在下面的JSP代码中所看到的，有2个下拉菜单：make和model。我想在make中选择一个选项，模型下拉列表应该从数据库中自动填充，其值与该make相对应。

我正在使用AJAX和JSON执行此操作但是在选择Make中的任何值时，不调用JS来填充下一个下拉列表（不调用JS中的alert（））。我检查了id到处都是正确的但仍然没有调用JS。请查看为什么没有调用JS文件以及调用的Servlet是否正确？

请注意：JS文件位于JSP上，而不是单独的文件。

JSP：

<select id = "Make" name = "make" class = "form-control" >
<option value = "" > Make < /option>
<%
for (int i = 0; i < activity.length; i++) {
%> 
<option value = "<%=activity[i][0]%>"> <%=activity[i][0]%> </option>
<%
}
%>
</select>

<select id="Model" name="model" class="form-control">
<option value="">Model</option>
</select>

JQuery的：

$(document).ready(function() {
        $('#Make').change(function(event) {
            alert("JS called.");
        var $Make=$("select#Make").val();
           $.get('Inventory_dropdown_ACT',{custucmake:$Make},function(responseJson) {
            var html;
            var $select = $('#Model');
            $.each(responseJson.arrayName, function(options) {
             html += '<option name="'+options.custucmodel+'" >'+options.custucmodel+'</option>';
            });
         $select.html(html);
        },'json');
        });
    });

Inventory_dropdown_ACT.java：

package admin.inventory;

import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import commons.DbCon;

public class Inventory_dropdown_ACT extends HttpServlet {

    // populate dropdown
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        JSONArray cellarray = new JSONArray();
        JSONObject cellobj = null;
        JSONObject jo = new JSONObject();
        String make = request.getParameter("make");
        try {
            Connection con = DbCon.getCon("", "", "");
            Statement stmt = con.createStatement();
            ResultSet rs = stmt.executeQuery("Select * from ucmakemodelvariant where ucmmvmake='" + make + "'");
            while (rs.next()) {
                cellobj = new JSONObject();
                cellobj.put("custucmodel", rs.getString(4));
                cellarray.add(cellobj);
            }
            jo.put("arrayName", cellarray);
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(jo.toString());
        } catch (Exception e) {
            System.out.println(e);
        }
    }
}

Answer 1

使用JQuery并编写如下所示的事件监听器并尝试内部的代码

$(document).on('change','#Make', MakeChange);

/**
* Your function for populating the second dropdown
*
**/
function MakeChange(){
   alert("JS called.");
   var $Make=$("select#Make").val();
   $.ajax({url:'yourUrl',
           method:'GET',
           data:{yourdata},
           dataType:'json',
           success:function(response){
                alert(JSON.stringify(response));
           }})
}

将JS中的get请求中的参数更改为make中的custumcake或更改服务器中的行 request.getParameter("make");

到

request.getParameter("custumcake");

在选择上一个下拉列表时填充下拉列表

1 个答案: