get Data from DB using Spring MVC to show in dropdown list like Country, state, city

Question

I have 3 Drop Down list which are dependent on each other as Specific country contain Certain States and those states contain specific City,

all These Country, state and City have a Service call to DAO to get data from DB how i can manage Drop Down with the Help of Spring MVC to display proper Country and state and city in Drop down List of each

Answer 1

Create a REST Call to produce JSON Country object has a list of State Objects

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

Create another Rest call to get the City base on Country and State

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

I used AJAX/jquery in this example To

   //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"); 
} 

I made this from existing code and have not tried it but you should get the gist

Answer 2

At first, you should get familiar with MVC concept. The data you get from service by controller will act as the M. And the data will be passed to the view(V). Then you can use the data and creat a V. Normally, the View is created by using HTML and JSP. In your case, you can use JSP or any other template frameworks to creat three dropdown lists using the data.