選擇上一個下拉列表時填充下拉列表

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請求中的參數以從custumcake進行make ，要么更改服務器中的行request.getParameter("make"); custumcake

至

request.getParameter("custumcake");