案例

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

頁面效果：（頁面載入完畢自動回顯的資料）

Html程式碼：

<select id="planId" style="width:180px;" onchange="changePlan();">
		<option value="0" >請選擇計劃</option> 
</select>
<select id="taskId" style="width:180px;">
		<option value="0" >請選擇任務</option> 
</select>
 

前臺程式碼

<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("<option value='0'>請選擇一項</option>");

	    	 for(var i=0;i<msg.info.length;i++){//將所有的資料集合附加在option中
			    	$("#planId").append("<option value='"+msg.info[i].planId+"'>"+msg.info[i].planName+"</option>");//後臺的傳過來的資料中有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<msg.plan.length;i++){
	    		    alert(msg.plan.length+".....vfb");
			    	$("#planId").find("option[value='" + msg.plan[i].planId+ "']").attr("selected",true);
			    	changePlan2(msg.plan[i].planId);
			    	$("#taskId").find("option[value='" + msg.systemdata[i].systemId+ "']").attr("selected",true);
	    	 } */
	    //傳過來的資料只有一條時用下標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("<option value='0'>請選擇</option>");
	    	 for(var i=0;i<msg.info.length;i++){
			    	$("#taskId").append("<option value='"+msg.info[i].taskId+"'>"+msg.info[i].taskName+"</option>");
			    }
	    }
	    });
}

//選擇計劃時自動觸發任務的函式
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("<option value='0'>請選擇</option>");
	    	 for(var i=0;i<msg.info.length;i++){
			    	$("#taskId").append("<option value='"+msg.info[i].taskId+"'>"+msg.info[i].taskName+"</option>");
			    }
	    }
	    });
}


</script>