ajax级联

最新推荐文章于 2021-08-05 22:38:16 发布

王新禹

最新推荐文章于 2021-08-05 22:38:16 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/xiao_b_a_i/article/details/99474120

版权

界面：（使用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"><span
						style="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"><span
						style="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"><span
						style="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">&nbsp;</td>
					<td class="table_list1_style2"><input type="submit"
						name="btnUpdate" value="添加" id="btnUpdate" tabindex="1"
						class="button" /> &nbsp;&nbsp; 
						<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;
}