JQuery实现动态数据二级联动

写此博客原因：项目中需要二级联动，点击一级学科，联动到二级学科，上网查了资料，都写的是从前台获取，很不满意，决定自己写一个二级联动！
JQuery：

$(function() {
	//ajax实现二级联动
	$.post("${basePath}field/getjson.action",function(data){
		if(data){
			var field = "";
			for(var i=0;i<data.length;i++){
				field += "<option values='" + data[i].name + "'>" + data[i].name + "</option>";
			}
			$("#field").append(field);
		}
		//选中一级学科触发函数,异步获取二级学科
		$("#field").change(function() {
			var field = $("#field option:selected").val();//获取下拉列表中的选中项
			$("#profession > option:gt(0)").each(function(){//避免option累加
				$("#profession").empty();
			});
			$.post("${basePath}profession/selectAllProfession.action",{field:field},function(data,status){
				var profession = "";
				for(var i=0;i<data.length;i++){
					profession += "<option values='" + data[i].name + "'>" + data[i].name + "</option>";
				}
				$("#profession").append(profession);
			});
		});
	});
});

JSP页面：

<div class="form-group">
	<label class="col-md-2 control-label"><span class="warning">*&nbsp;&nbsp;</span>问题领域:</label>
		<div class="col-md-3">
		<select class="form-control" id="field">
			<option>----请选择领域----</option>
					</select>
				</div>
				<div class="col-md-3">
					<select class="form-control" id="profession">
						<option>----请选择专业----</option>
					</select>
				</div>
				<div class="col-md-4">
					<span class="warning" id="q2"></span>
				</div>
			</div>

前台JSP页面：

<div class="form-group">
	<label class="col-md-2 control-label"><span class="warning">*&nbsp;&nbsp;</span>问题领域:</label>
	<div class="col-md-3">
		<select class="form-control" id="field">
			<option>----请选择领域----</option>
		</select>
	</div>
	<div class="col-md-3">
		<select class="form-control" id="profession">
			<option>----请选择专业----</option>
		</select>
	</div>
	<div class="col-md-4">
		<span class="warning" id="q2"></span>
	</div>
</div>

后台控制层：

一级学科:
@RequestMapping("/getjson")
	@ResponseBody
	public List<Field> getjson(){
		return service.select();
	}

二级学科:
@RequestMapping("/selectAllProfession")
	@ResponseBody
	public List<Profession> selectAllProfession(HttpServletRequest request){
		String field = request.getParameter("field");
		List<Profession> list = service.selectAllProfession(field);
		return list;
	}