javascript - populate dropdown on selecting previous dropdown -

as can see in jsp code below, there 2 dropdowns : make , model. want select option in make , model dropdown should autofilled database values corresponding make.

i'm doing using ajax , json on selecting value in make, js fill next dropdown not called (alert() in js not called). checked id's everywhere correct still js not called. please see why js file not called , if servlet called correct?

please note: js file on jsp, , not seperate file.

jsp:

<select id = "make" name = "make" class = "form-control" > <option value = "" > make < /option> <% (int = 0; < 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 * ucmakemodelvariant 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);         }     } } 

use jquery , write event listener below , try code inside inside

$(document).on('change','#make', makechange);  /** * function populating 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 parameter in request in js make custumcake or change line in server request.getparameter("make");

to

request.getparameter("custumcake");