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

Question

正如您在下面的 JSP 代码中所见，有 2 个下拉菜单：品牌和型号。我想在 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请求中的参数从custumcake更改为make，要么更改服务器中的行 request.getParameter("make");

到

request.getParameter("custumcake");