ajax级联
界面：（使用onchange事件）
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>房間添加</title><script type="text/javascript">//查詢項目$(document).ready(function(){var projectnameList = document.querySelector("#projectname");$.ajax({url:"../room/selectProject.do",datatype:'json', //data:{'SearchSql':SearchSql}, // 發送數據 error:function(data){ alert("出錯了！！");}, success:function(data){var projectName = data.projectList;for(var i=0;data.projectList.length;i++){var project = projectName[i].name;var projectOption = new Option(project);projectnameList.options.add(projectOption);}}});});</script><script type="text/javascript">//樓棟function bbb(){//獲取下拉框var complexnameList = document.querySelector("#complexname");var unitnameList = document.querySelector("#unitname");var project= $("#projectname").val();if(project!=""){$.ajax({url:"../room/selectComplex.do",datatype:'json',data:{project :project}, error:function(data){ alert("出錯了！！");}, success:function(data){var project = data.project;if(project == "--請選擇--"){//清空complexnameList.options.length = 0;unitnameList.options.length = 0;}else{//清空complexnameList.options.length = 0;unitnameList.options.length = 0;var complexName = data.complexsList;var unitsName = data.unitsList;for(var i=0;i<data.complexsList.length;i++){var complex = complexName[i].cnumber;var complexOption = new Option(complex);complexnameList.options.add(complexOption);}//默認加載第一個樓棟的單元for(var j=0;j<data.unitsList.length;j++){var units = unitsName[j].number;var unitsOption = new Option(units);unitnameList.options.add(unitsOption);}}}});}}</script><script type="text/javascript">//單元function ccc(){var unitnameList = document.querySelector("#unitname");var complex = $("#complexname").val();$.ajax({url:"../room/selectUnits.do",datatype:'json', data:{complex:complex}, // 發送數據 error:function(data){ alert("出錯了！！");}, success:function(data){var unitsName = data.unitsList;for(var i=0;data.unitsList.length;i++){var units = unitsName[i].number;var unitsOption = new Option(units);unitnameList.options.add(unitsOption);}}});}</script> </head> <body><form method="post" action="addRoom.do" id="form1"><div id="divTwo"><table width="100%" border="0" cellpadding="2" cellspacing="2"class="table_list1"><tr id="selTwo"><td width="20%" class="table_list1_style1"><spanstyle="color: Red">*</span> 所屬項目</td><td width="35%" class="table_list1_style2"> <select name="projectname" id="projectname" tabindex="99" onchange="bbb()" style="width: 150px"><option value="--請選擇--">--請選擇--</option></select></td></tr><tr id="selTwo"><td width="20%" class="table_list1_style1"><spanstyle="color: Red">*</span> 所屬樓棟</td><td width="35%" class="table_list1_style2"> <select name="complexname" id="complexname" tabindex="99" onchange="ccc()" style="width: 150px"><option value=""></option></select></td></tr><tr id="selTwo"><td width="20%" class="table_list1_style1"><spanstyle="color: Red">*</span> 所屬單元</td><td width="35%" class="table_list1_style2"> <select name="unitname" id="unitname" tabindex="99" style="width: 150px"><option value=""></option></select></td></tr><tr id="isNone"><td class="table_list1_style1"> </td><td class="table_list1_style2"><input type="submit"name="btnUpdate" value="添加" id="btnUpdate" tabindex="1"class="button" /> <input id="btnBack" type="button"class="button" value="關閉" onclick="close11()" /></td></tr></table></div></form> </body> </html>controller：（@ResponseBody是ajax獲取返回值必須的）
//查詢項目 @RequestMapping("/selectProject.do") @ResponseBody public Map<String,Object> selectProject(){Map<String, Object> map = new HashMap<String, Object>();List<Project> list = projectService.selectList(null);map.put("projectList", list);return map; }//查詢樓棟 @RequestMapping("/selectComplex.do") @ResponseBody public Map<String,Object> selectComplex(String project){Map<String, Object> map = new HashMap<String, Object>();if(!project.equals("--請選擇--")){Complex complex = new Complex();complex.setProjectname(project);List<Complex> complexList = complexService.selectList(complex);//傳遞樓棟的集合map.put("complexsList", complexList);//默認加載第一個樓棟的單元Units units = new Units();units.setComplexname(complexList.get(0).getCnumber());List<Units> unitsList = unitsService.selectList(units);map.put("unitsList", unitsList);}else{map.put("project", project);}return map; }//查詢單元 @RequestMapping("/selectUnits.do") @ResponseBody public Map<String,Object> selectUnits(String complex){Map<String, Object> map = new HashMap<String, Object>();Units units = new Units();units.setComplexname(complex);List<Units> list = unitsService.selectList(units);map.put("unitsList", list);return map; }總結
- 上一篇： 使用jquery处理多选框checkbo
- 下一篇： Lattice PCIe 学习 1