<select name="selectProvince" id="selectProvince"> <option selected>请选择省份</option> <option th:each="selectProvince:${session.selecProvince}" th:value="${selectProvince.province_id}" th:text="${selectProvince.province}"></option> </select> <select name="selectCity"> <option selected>选择城市</option> <option th:if="${session.selectCity}" th:each="SelectCity:${session.selectCity}" th:value="${SelectCity.city_id}" th:text="${SelectCity}"></option> </select>现在当我取了province的信息之后，会调用对应的ajax方法到后台处理，传city信息到前台，但是要刷新后才能出现，该如何改进做到当选择完province后，对应的city的选择框直接对应显示，不需要刷新

可以通过Ajax实现省份和城市之间的级联选择。当选择省份时，通过Ajax请求后台获取该省份对应的城市信息，然后更新城市选择框的选项。

具体做法是，在省份选择框的change事件中，发送Ajax请求到后台获取城市信息，并将城市信息更新到城市选择框中。以下是一个示例代码：

HTML代码：

<select name="selectProvince" id="selectProvince">
  <option selected>请选择省份</option>
  <option th:each="selectProvince:${session.selecProvince}" th:value="${selectProvince.province_id}" th:text="${selectProvince.province}"></option>
</select>
<select name="selectCity" id="selectCity">
  <option selected>选择城市</option>
</select>

JavaScript代码：

$(document).ready(function() {
  // 省份选择框的change事件
  $("#selectProvince").change(function() {
    // 获取选中的省份ID
    var provinceId = $(this).val();
    // 发送Ajax请求获取城市信息
    $.ajax({
      url: "/getCity",
      type: "GET",
      dataType: "json",
      data: {provinceId: provinceId},
      success: function(data) {
        // 清空城市选择框的选项
        $("#selectCity").empty();
        // 添加城市选项
        $.each(data, function(index, city) {
          $("#selectCity").append('<option value="' + city.city_id + '">' + city.city + '</option>');
        });
      }
    });
  });
});

在后台Controller中，可以根据省份ID查询对应的城市信息，并将城市信息以json格式返回给前端。以下是一个示例代码：

@GetMapping("/getCity")
@ResponseBody
public List<City> getCity(@RequestParam("provinceId") int provinceId) {
  List<City> cityList = cityService.getCityByProvince(provinceId);
  return cityList;
}

这样，在选择省份后，城市选择框的选项会自动更新，无需刷新页面。