Заполните раскрывающийся список на основе выбора другого раскрывающегося списка

Question

Мой весенний загрузчик java Проект thymeleaf имеет форму с выпадающим списком, заполненным таблицей SQL. Форма имеет второй выпадающий список, который я хочу заполнить, исходя из того, какой элемент выбран в первом раскрывающемся списке. Для этого мне нужно будет передать идентификатор значения первого раскрывающегося списка. Я знаю, что должен использовать JQuery, чтобы выполнить sh, но нужно ли мне делать два ajax вызова? Один, чтобы передать выбранный идентификатор, а другой, чтобы получить новый список для второго выпадающего? Должен ли get ajax быть после поста ajax или внутри него? Может ли кто-нибудь помочь мне лучше понять, как лучше всего достичь того, что я пытаюсь сделать?

Это то, что я имею до сих пор:

<td> <select  class="form-control" id="parentCo" th:field="*{ams360Policies[__${stat.index}__].parentCompany}" required="true" >
      <option th:value="select">-Select-</option>
      <th:block th:each="carrier : ${carriers}">
               <option th:value="${carrier.parentCompanyCarrier}" th:text="${carrier.parentCompanyCarrier}" th:data="${carrier.id}"></option>
       </th:block>
        </select>
</td>
<td><select class="form-control" id="writeCos" th:field="*{ams360Policies[__${stat.index}__].writingCompany}" required="true" >

     </select>
</td>

//grab value of selected carrier
$('#parentCo').on('change', function(event){
    $('#parentCo').find('option:selected');
    var id = $(this).attr('data');
    $.ajax({
        type: "POST",
        url: "/carrierAjax",
        data: id,
        processData: false,
        contentType: false,
        cache: false,
        success: function(data, jqXHR){
            console.log('sent ID successfully')
        }
    });
    
     $.ajax({
        type: "GET",
        url: "/carrierAjax",
        data: carrierUmbrellas,
        processData: false,
        contentType: false,
        cache: false,
        success: function(data, jqXHR){
            //do afor each here to append each writeCo
            data.each(function(writeCo) {
            $('#writeCos').append('<option th:value="${writingCo.id}" th:text="${writingCo.companyName}"></option>')
        }
});

Или если бы мне нужно было сделать только один AJAX звонок, было бы что-то вроде этого?

$('#parentCo').on('change', function(event) {
  $('#parentCo').find('option:selected');
  var id = $('#parentCo').find('option:selected').attr('data');
  console.log(jQuery.type(id));
  var token = $("meta[name='_csrf']").attr("content");
  var header = $("meta[name='_csrf_header']").attr("content");
  $.ajax({
    type: "POST",
    url: "/carrierAjax",
    data: {
      data: $('#parentCo').find('option:selected').attr('data')
    },
    cache: false,
    timeout: 600000,
    beforeSend: function(xhr) {
      xhr.setRequestHeader(header, token);
      console.log(header + ", " + token);
    },
    success: function(data) {
      //need to pass the value back from the spring controller here and append it below in an option tag...
      $('#writeCos').append('<option value=""></option>');
      console.log('successful');

    }
  });
});

В моем контроллере:

@RequestMapping(value="/carrierAjax", method=RequestMethod.POST)
    public @ResponseBody List <CarrierUmbrella>  getcarrierswriteco (@RequestParam("data") String data, DirectBind directBind, Model model) throws Exception{
        List <CarrierUmbrella> carrierUmbrellas = carrierUmbrellaRepository.findByCarrier(caRepository.findById(Long.parseLong(data)));
        model.addAttribute("carrierUmbrellas", carrierUmbrellas);
        return carrierUmbrellas;
    }