如何实现页面一加载就将上一次选择操作的下拉框值回显出来

案例

——————————————————————

注意:后台数据库只存有一条数据,就是记录每次操作的下拉框的数据,这样设计简单明了,回显时只需要查这一条数据就可以了。

页面效果:(页面加载完毕自动回显的数据)

在这里插入图片描述

Html代码:



前台代码

<script type="text/javascript">

GetOneSelect();页面加载时自动执行的函数

function GetOneSelect(){
	$.ajax({  
		 async: false,
		 url: jutil.ctxPath +"/url",//需要访问的后台url路径
	    type: "post",    
	    data:{},  
	    dataType: "json", 
	    success: function (msg) {//将后台的数据传回前台
	    	$("#planId").empty();
	    	$("#planId").append("");

	    	 for(var i=0;i<msg.info.length;i++){//将所有的数据集合附加在option中
			    	$("#planId").append("+msg.info[i].planName+"");//后台的传过来的数据中有planId和planName字段
			    }
	    	 GetHomeData();//调用执行回显函数,将需要的数据回显到标签
	    }
	    });
	
}

function GetHomeData(){
	changePlan();//因为两个下拉框是有关系的,所以第一个下拉框选择完毕会自动触发第二个下拉框
	$.ajax({  
		 async: false,
		 url: jutil.ctxPath +"/url",//需要访问的后台url路径
	    type: "post",    
	    data:{},  
	    dataType: "json", 
	    success: function (msg) {
	    //传过来的数据有多条时用for循环
	    	/*  for(var i=0;i
	    //传过来的数据只有一条时用下标0取即可
	    	$("#planId").find("option[value='" + msg.plan[0].planId+ "']").attr("selected",true);//回显第一个值
	    	changePlan2(msg.plan[0].planId);//过滤第二个下拉框
	    	$("#taskId").find("option[value='" + msg.systemdata[0].systemId+ "']").attr("selected",true);//回显第二个值
	    	 
	    }
	    });
}

function changePlan2(planId){
	//var planId = $('#planId').val();
	$.ajax({  
		 async: false,
		 url: jutil.ctxPath +"/url",
	    type: "post",    
	    data:{"planId":planId},  
	    dataType: "json", 
	    success: function (msg) {
	    	console.log(msg);
	    	$("#taskId").empty();
	    	$("#taskId").append("");
	    	 for(var i=0;i<msg.info.length;i++){
			    	$("#taskId").append("+msg.info[i].taskName+"");
			    }
	    }
	    });
}

//选择计划时自动触发任务的函数
function changePlan(){
	var planId = $('#planId').val();
	$.ajax({  
		 async: false,
		 url: jutil.ctxPath +"/url",
	    type: "post",    
	    data:{"planId":planId},  
	    dataType: "json", 
	    success: function (msg) {
	    	$("#taskId").empty();
	    	$("#taskId").append("");
	    	 for(var i=0;i<msg.info.length;i++){
			    	$("#taskId").append("+msg.info[i].taskName+"");
			    }
	    }
	    });
}


</script>

注意:每次给下拉框附上默认值时,都得把需要选择的项都查询出来附上去,不然再选的时候option项就只剩下回显的值了

转载请注明出处:https://mp.csdn.net/mdeditor#Markdown_2

你可能感兴趣的:(JS)