1. 程式人生 > >二級聯動,多級聯動

二級聯動,多級聯動

首先,二級聯動,還是多級聯動小夥伴們不要怕,其實很簡單。

首先,理清思路:

  1. 首先第一個頁面,肯定是進來就需要載入的
  2. 然後通過觸發第一個事件,一般都是select寫 聯動,然後通過事件方法將引數(二級需要的條件)傳送給下一個 需要用的地方(需要展示的地方)

上程式碼:注意$(function(){  })這個方法裡是頁面在載入的時候就需要載入的方法 通常是一級

$(function(){
	//應用
	$.ajax({  
	    url: "/modelServer/loadApplication",    //後臺裡的方法名稱  
	    type: "post",  
	    dataType: "json",  
	    contentType: "application/json",  
	    traditional: true,  
	    success: function (data) {
	    	if(data != null && data.length > 0){
	    	  for(var i=0;i<data.length;i++){
	         	 $("#domainList").append("<option value='"+data[i].applicationID+"'>"+data[i].applicationName+"</option>");
	    	  }
	    	}
	    },  
	    error: function (msg) {  
	    	layer.alert("伺服器出錯了!");  
	    }  
	});
});

有了一級,現在我們的需求就是選擇 一級 顯示對應的二級  所以我們要在一級 設定一個onchange事件叫做 firstSel()這個事件就不能放在$(function(){  }); 要放在這個方法外面,因為我們不可能在載入頁面的時候就將 二級 加載出來

<div class="row cl">
	<label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>應用名稱</label>

	<div class="formControls col-xs-8 col-sm-9">
		<select class="select-box" id="domainList" name="domainId" onchange="firstSel();">
			<option value="0">請選擇</option>
		</select>
	</div>
</div>

下面是firstSel()方法

function firstSel() {
	$("#tagImageId").empty(); 
	var applicationId = $('#domainList option:selected').val();
	//模型
	$.ajax({  
	    url: "/modelServer/loadModel",    //後臺裡的方法名稱  
	    type: "post",  
	    data:{"applicationId":applicationId},
	    traditional: true,  
	    success: function (data) {
	    	if(data != null && data.length > 0){
	    	  for(var i=0;i<data.length;i++){
	         	 $("#tagImageId").append("<option value='"+data[i].modelID+"'>"+data[i].modelName+"</option>");
	    	  }
	    	}else{
	    		$("#tagImageId").append("<option value='-1'>"+"-暫無關聯的應用-"+"</option>");
	    	}
	    },  
	    error: function (msg) {  
	    	layer.alert("伺服器出錯了!");  
	    }  
	});
}

然後下面是二級標籤

<div class="row cl">
	<label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>模型名稱:</label>
		<div class="formControls col-xs-8 col-sm-9">
			<select class="select-box" id="tagImageId" name="tagImageId">
				
			</select>
		</div>
</div>