二级联动，多级联动

首先，二级联动，还是多级联动小伙伴们不要怕，其实很简单。

首先，理清思路：

首先第一个页面，肯定是进来就需要加载的
然后通过触发第一个事件，一般都是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>

二级联动，多级联动

猜你喜欢