一:controller代碼: 後臺就簡單返回map集合就行,表結構也是簡單的通過父類Id來實現的 二:前端代碼(ajax實現頁面無刷新): ...
一:controller代碼:
後臺就簡單返回map集合就行,表結構也是簡單的通過父類Id來實現的
/** * 三級聯動 * @param id 父類id * @return */ @RequestMapping(value = "/Options", method = { RequestMethod.POST, RequestMethod.GET}) @ResponseBody public List<Map<String, Object>> Options(int id){ List<Map<String, Object>> dataList=new ArrayList<Map<String,Object>>(); try { if(id!=null && id!=0){ List<Item> items=itemService.getAllName(id); for (Item i : items) { Map<String, Object> map=new HashMap<String, Object>(); map.put("id", i.getId()); map.put("name", i.getName()); dataList.add(map); } } } catch (Exception e) { e.printStackTrace(); } return dataList; }
二:前端代碼(ajax實現頁面無刷新):
$().ready(function() { $("#oneId").on("change",function(){ var oneId = $("#oneId").val(); $("#twoId").html("<option value='0'>--請選擇--</option>"); $("#threeId").html("<option value='0'>--請選擇--</option>"); $.ajax({ url: "Options.action", type: "POST", data: { itemCatId:oneId //一級類目id }, dataType: "json", success: function(data) { $.each(data, function(idx, obj) { $("#twoId").append("<option value='"+obj.id+"'>" + obj.name + "</option>"); }); } }); }); $("#twoId").change(function () { var twoId = $("#twoId").val(); $("#threeId").html("<option value='0'>--請選擇--</option>"); $.ajax({ url: "Options.action", type: "POST", data: { itemCatId:twoId//二級類目id }, success: function(data) { $.each(data, function(idx, obj) { $("#threeId").append("<option value='"+obj.id+"'>" + obj.name+ "</option>"); }); } }); }); });
頁面代碼就不貼了,此三級聯動是在綁定好一級分類的基礎上進行的,oneId,twoId,threeId分別指一,二,三級select的id