我有一个像这样的jsp表单……第二个选择框中的值,应该根据第一个选择框(国家)中的值加载状态.我正在使用AJAX,JSON,Spring MVC来检索结果.
index.jsp的…..
<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>
<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:select>
<form:checkBoxes items="${skillsList}" path="skills" itemLabel="description" itemValue="id" delimiter="<br>" />
<form:checkBoxes items="${languagesList}" path="languages" itemLabel="description" itemValue="id" delimiter="<br>" />
</form:form>
控制器….
@RequestMapping(value="stateslist.html") public @ResponseBody List<State> sectionList(@modelattribute("search") SearchForm search,@RequestParam(value="countryId",required=true) String countryId,ModelMap modelMap){ return stateService.getStates(countryId); }
JQuery部分….
<script type="text/javascript" charset="utf-8">
function getStates(){
$.getJSON(
"stateslist.html",{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>';
}
$('#state').append(html);
}
);
}
$(document).ready(function() {
$('#country').change(function()
{ getStates();
});
});
</script>
我可以看到调试器将ajax请求提交给Spring控制器,它确实返回一个State对象列表,其中包含id,name等字段……问题是状态选择选项没有改变.似乎是那个功能(数据){….}部分不起作用.有人帮助我,我在这里做错了…
—更新—
function(data){alert("something");}
即使这不起作用……这意味着呼叫永远不会达到那个部分……
解决方法
我有相同的代码,其中city(cityId)值根据country(countryId)选择进行更改.它非常完美：
$("select#countryId").change(function(){
$.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>';
}
$("select#cityId").html(options);
});
});
所以我认为你只需要添加“select”前缀.
