RKodakandla RKodakandla - 1 year ago 79
JSON Question

JQuery, JSON, Spring MVC - Dynamically loading select options

I have a jsp form like this... Values in the second select box, state should be loaded based on value in first select box (country),. I am using AJAX, JSON, Spring MVC to retrieve results.


<form:form name="myform" modelAttribute="search" action="POST">
<form:input path="firstName" class="text" />
<form:input path="lastName" class="text" />
<form:select path="country" id="country">
<form:option value="" label="--Choose A Value--"></form:option>
<form:options items="${countryList}" itemValue="id" itemLabel="name"></form:options>
<form:select path="state" onchange="javascript:itemFocus('submit');" id="state">
<form:option value="" label="--Choose A Value--"></form:option>
<form:options items="${stateList}" itemValue="id" itemLabel="description"></form:options>
<form:checkboxes items="${skillsList}" path="skills" itemLabel="description" itemValue="id" delimiter="<br>" />
<form:checkboxes items="${languagesList}" path="languages" itemLabel="description" itemValue="id" delimiter="<br>" />



public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){
return stateService.getStates(countryId);

JQuery part....

<script type="text/javascript" charset="utf-8">
function getStates(){
{countryId: $('#country').val()},
function(data) {
var html = '';
var len = data.length;
for(var i=0; i<len; i++){
html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';

$(document).ready(function() {
{ getStates();

I can see form the debugger that the ajax request is getting submitted to the the Spring controller and it does returns a list of State objects, which contains fields like id, name etc... Problem is that the state select options are not changing.. seems to be that
part is not working..can someone help me where I am doing wrong here...


I have removed everything from the callback function and just had thi..


even this didn't work... that mean call never reached that part...

Answer Source

I have the same code where city (cityId) values are changed according to country (countryId) selection. It works perfect:

         $.getJSON("getCityList.do",{countryCode: $(this).val()}, function(j){
              var options = '';
              for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';

So I think you just need to add "select" prefix.