populate dropdown on selecting previous dropdown

Question

As you can see in the JSP code below, there are 2 dropdowns : make and model. I want to select an option in make and the model dropdown should be autofilled from database with values corresponding to that make.

I'm doing this using AJAX and JSON but on selecting any value in Make, the JS to fill next dropdown is not called (alert() in JS is not called). I checked that the id's everywhere are correct but still the JS is not called. Please see why the JS file is not called and if the Servlet called is correct?

Please note: The JS file is on the JSP, and not as a seperate file.

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

Use JQuery and Write the event listener like below and try the code inside inside

$(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));
           }})
}

And either change the parameter in the get request in JS to make from custumcake or change the line in the server request.getParameter("make");

to

request.getParameter("custumcake");