Spring MVC中Ajax实现二级联动的简单实例

今天写项目遇到了二级联动，期间遇到点问题，写个博客记录一下。

后台Controller：

@RequestMapping("/faultType")@ResponseBodypublic Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException{String ReturnMessage = "";//获取所有子类故障类型List<FaultType> fauList=faultTypeService.getById(id);if(fauList.size()>0){request.setAttribute("childType", fauList);ReturnMessage = "OK";}else {ReturnMessage = "未找到信息";}//*************************************************************Map<String,Object> ReturnMAP = new HashMap<String,Object>();ReturnMAP.put("childType", fauList);return ReturnMAP;}

前台JSP：

<div class="col-sm-3"><div class="form-group"><label class="col-3 control-label no-padding-right">故障类型： </label><select name="faulttype" id="faulttype" onchange="javascript:typeChange()"><c:forEach items="${faultlist }" var="faulist"><option value="${faulist.faultId }">${faulist.faultContent }</option></c:forEach></select></div></div><div class="col-sm-3"><div class="form-group"><label class="col-3 control-label no-padding-right">故障： </label><input id="childTypeCont" name="childTypeCont"value="" type="hidden" class="col-sm-4 form-control" placeholder="故障"><select name="faulttype1" id="faulttype1""><option>--请选择--</option><c:forEach items="${childType }" var="faulist"><option value="${faulist.faultId }">${faulist.faultContent }</option></c:forEach></select></select></div></div>

JS：

function typeChange(){var type=$("#faulttype").val();var html = "<option>--请选择--</option>"; var CommitUrl = "faultType.do?id=" + type;$.ajax( {type : "POST",contentType : "application/json",url : CommitUrl,dataType : 'json',success : function(result){var Curedata = $.extend(true, [], result); if (Curedata.childType != null) { for(var i=0;i<Curedata.childType.length;i++){html+="<option value='"+Curedata.childType[i].faultId+"'>"+Curedata.childType[i].faultContent+"</option>";}$("#faulttype1").empty();$(html).appendTo("#faulttype1") ;} }});}

以下是引用别人写的（原文地址：http://blog.csdn.net/gis__/article/details/6647464）

记性不好的可以收藏下： 

1，下拉框：

var cc1  = $(".formcselect[@name='country'] option[@selected]").text();//得到下拉菜单的选中项的文本(注意中间有空格) var cc2 = $('.formcselect[@name="country"]').val(); //得到下拉菜单的选中项的值 var cc3 = $('.formc select[@name="country"]').attr("id");//得到下拉菜单的选中项的ID属性值 $("#select").empty();//清空下拉框//$("#select").html(''); $("<optionvalueoptionvalue='1'>1111</option>").appendTo("#select")//添加下拉框的option