Javascript Spring MVC-基于DB实体创建相关下拉列表

各位。 我有两个下拉列表：一个是州列表，另一个应该是城市列表。 以下是模型：

@Entity
@Table(name = "state")
public class State {

    /Id and others attributes
    
    @OneToMany(mappedBy = "state")
    private List<City> cities;
    
    /getters and setters

现在控制器：

@GetMapping("/new")
    public ModelAndView newDistrict() {
        ModelAndView modelAndView = new ModelAndView(CRUD_VIEW);
        modelAndView.addObject(new District());
        return modelAndView;
    }

    @ModelAttribute("AllStates")
    public List<State> AllStates(){
        return stateRepository.findAll();
    }
    
    @ModelAttribute("AllCities")
    public List<City> AllCities(){
        return cityRepository.findAll();
    }

@GetMapping（“/new”）
公共模型和视图新建区（）{
ModelAndView ModelAndView=新的ModelAndView（CRUD_视图）；
modelAndView.addObject（new District（））；
返回模型和视图；
}
@ModelAttribute（“所有状态”）
公共列表所有状态（）{
return stateRepository.findAll（）；
}
@ModelAttribute（“所有城市”）
公共列表所有城市（）{
return cityRepository.findAll（）；
}

这是一种观点：

<form action="/discricts" th:object="${discrict}" method="post">
        <input type = "hidden" th:field="*{id}"/>
        <select name="state" class="list-states" >
            <option th:each="state : ${AllStates}" th:value="${state.id}" th:text="${state}" 
             th:field = "*{state}">
            </option>
        </select>
        
        <select name="city" class="list-cities">
            <option th:each="city : ${AllCities}" th:value="${city.id}" 
             th:text="${city.cities}" th:field = "*{city}">
            </option>
        </select>
        <button type="submit">Save</button>
    </form>

拯救

---

因此，我希望第二个下拉列表只显示第一个下拉列表中选择的州包含的城市，但它显示所有注册城市。我有办法做到吗？顺便说一句，我对Spring和MVC都是新手。非常欢迎任何帮助。

您不能单独使用Thymeleaf，因为您希望这是在select上完成的（因此无需重新加载页面），它必须通过JS完成

function ajax_get(url, callback) {
    let selectedCountry = document.getElementById("select1").value;
    fetch(url + "/" + selectedCountry)
      .then(response => {
          processData(response)
      });
}

function processData(data) {
    let options = document.getElementById("select2").children;
    for (let i = 0; i < options.length; i++) {
        let content = options[i].textContent;
        if(!data.includes(content)) {
            options[i].style.display = 'none';
        }
    }

ps：我没有测试ajax调用，所以可能需要一些小的调整，通常这是您的问题所需要的方法。端点需要接受country作为路径变量，并返回字符串列表（城市）

---

另外，别忘了定义一个端点

它工作得很好，非常感谢！

function ajax_get(url, callback) {
    let selectedCountry = document.getElementById("select1").value;
    fetch(url + "/" + selectedCountry)
      .then(response => {
          processData(response)
      });
}

function processData(data) {
    let options = document.getElementById("select2").children;
    for (let i = 0; i < options.length; i++) {
        let content = options[i].textContent;
        if(!data.includes(content)) {
            options[i].style.display = 'none';
        }
    }

document.onload = function () {
    document.getElementById("select1").onselect(ajax_get("your_endpoint", processData))
}