二级联动(jquery-ajax-json-springmvc)
html代码
<select id="firstDepartment" onchange="onChange()"> <option value="0">1</option>
<option value="1">1</option>
<option value="2">2</option> </select> <select id="secondDepartment"/>
js代码
//firstLevelName 一级下拉框
//secondLevelName 二级下拉框
function onChange(){ var firstLevelName = $('#firstDepartment').val(); $.ajax({ url: 'getSecondLevelNames', type: 'get', contentType: "application/json; charset=utf-8", data:{firstLevelName: firstLevelName}, dataType: 'json', success: function(data){ var names = data.secondLevelNames; $('#secondDepartment').empty(); for(var i in names){ $("<option value = '" + decodeURI(names[i]) + "' >" + decodeURI(names[i]) + "</option>").appendTo($('#secondDepartment')); } } } ); }
后台代码
@RequestMapping(value = "/getSecondLevelNames", method = RequestMethod.GET) public @ResponseBody String getSecondLevelNames(@RequestParam(value = "firstLevelName") String firstLevelName){ List<String> secondLevelName = LevelUtil.getSecondLevelNames(firstLevelName); JSONObject json = new JSONObject(); json.put("secondLevelNames", secondLevelName); return json.toString(); }