Problem in Jquery & Ajax call to Spring MVC Controller

Question

Below is the select box in my UI where a dynamic company list is showing from the controller.

<form:label path="companyDetails.companyName">Select Company</form:label>
  <form:select id="slectCompany" path="companyDetails.companyName">
    <form:option value="" label="Select" />
      <form:options items="${companyList}" itemValue="registerId" 
         itemLabel="companyName"/>
</form:select>

Now, i want to auto populate the list of company reference id related to the coresponding selected company name into the below select box:

<form:label path="companyDetails.companyRefId">Select Company Reference Id</form:label>
 <form:select id="slectRefId" path="companyDetails.companyRefId">
   <form:option value="" label="Select" />
</form:select>

I have make a jquery & ajax call to make a GET request to controller for the list of company reference id as selected company name in the previous select box.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
           $("#slectCompany").change(function(){
               alert("Inside alert function..");
                var registerId = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: "/registerId/" + registerId,
                    success: function(data){
                        alert("inside sub function..");
                        var slectRefId=$('#slectRefId'), option="";
                        slectRefId.empty();

                        for(var i=0; i<data.length; i++){
                            option = option + "<option value='"+data[i].addressId + "'>"+data[i].companyRefId + "</option>";
                        }
                        slectRefId.append(option);
                    },
                    error:function(){
                        alert("error");
                    }

                });
            });
           </script>

The problem is, its not making a request. Any input will be valuable for me.

Answer 1

call onChange in select :

<form:label path="companyDetails.companyName">Select Company</form:label>
  <form:select id="slectCompany" onchange="myFunction()" path="companyDetails.companyName">
    <form:option value="" label="Select" />
      <form:options items="${companyList}" itemValue="registerId" 
         itemLabel="companyName"/>
</form:select>

pass registerId as data not as url part:

  $.ajax({
                    type: 'GET',
                     data: {  registerId: registerId},