java - 使用 Spring MVC 从数据库获取数据以显示在下拉列表中，例如国家、州、城市

Question

我有 3 个下拉列表，它们相互依赖，因为特定国家/地区包含某些州，而这些州包含特定城市，

所有这些国家、州和城市都有对 DAO 的服务调用，以从数据库获取数据，我如何在 Spring MVC 的帮助下管理下拉列表，以在每个下拉列表中显示正确的国家、州和城市

Answer 1

创建 REST 调用以生成 JSON Country 对象，该对象具有状态对象列表

   @RequestMapping(value= "/countryState", produces = MediaType.APPLICATION_JSON_VALUE)
    public List< CountryStateCity> retrieveCountryState() {
    return ddlService.retrieveCountryState();
    } 

创建另一个休息调用以获取基于国家/地区和州的城市

  @RequestMapping(value= "/city", produces = MediaType.APPLICATION_JSON_VALUE)
    public List< CountryStateCity> retrieveCity(String country,String state) {
    return ddlService.retrievecity(country,state);
    } 

我在这个例子中使用了 AJAX/jquery

   //Fill first Dropdown

    $.ajax({
    type:     "GET",
     url: "http://192.168.33.60:8080/countryStateCity?callback=?",
     dataType: "jsonp",
     jsonpCallback: 'jsonCallback',
     cache:false,
    success: function(data) {
        var dataToStore = JSON.stringify(data);
        localStorage.setItem('jsonResults', dataToStore);//Store json to browser local storage
        $("#country").get(0).options.length = 0;
        $("#country").get(0).options[0] = new Option("Select Country", "0");   

        $.each(data, function(index, item) {
            $("#country").get(0).options[$("#country").get(0).options.length] = new Option(item.mfrname, item.countryId);
        });
    },
    error: function(e) {
      //  alert("Error Loading Manufactures");
    }
});



 $("#country").on("change", function (event) { //Change event on country Drop down clear State and City Dropdowns
    var countryId=$("#country").val();
    var stateId=$("#state").val();
    $('#City').find('option').remove().end(); //clear City dropdown and add only select
    $("#City").get(0).options[0] = new Option("--Select--", "0"); 
    $('#state').find('option').remove().end();
    $('#category').find('option').remove().end();

    resetTables();


     var localData = JSON.parse(localStorage.getItem('jsonResults'));// Go to local storage and get state values
    var i = null;
    for (i = 0; localData.length > i; i += 1) {
        if (localData[i].countryId === countryId) {
              $.each(localData[i].states, function(index, value) {
               $("#state").get(0).options[$("#state").get(0).options.length] = new Option(value.description, value.code);
            });
        }
    }

 });     
$("#state").on("change", function (event) {//State change event clear city then go to 
    var countryId=$("#country").val();
    var stateId=$("#state").val();
 // alert(countryId!="0"&&stateId!="0");
     $('#City').find('option').remove().end();
    $("#City").get(0).options[0] = new Option("--Select--", "0"); 
    $('#category').find('option').remove().end();
    resetTables();
    if(countryId!="0"&&stateId!="0"){
    //now call the citys Rest call   
    $.ajax({
        type:     "GET",
         url: "http://192.168.33.60:8080/cities?countryId="+countryId+"&stateId="+stateId+"&callback=?",
         dataType: "jsonp",
         jsonpCallback: 'jsonCallback',
         cache:false,
        success: function(data) {
            jsonResults=data;
              $.each(data, function(index, item) {
                   $("#City").get(0).options[$("#City").get(0).options.length] = new Option(item.description, item.code);
            });
        },
        error: function(e) {
          //  alert("Error Loading cities");
        }
    });
}  else{
    $("#City").get(0).options[0] = new Option("--Select--"+countryId, "0"); 
} 

我是根据现有代码制作的，尚未尝试过，但您应该了解要点