Ajax的三级联动

在html中

<!--下拉框的触动代码本身就有下拉数据了，相当是一级数据去触动第二级的方法-->	
   <select id="brandId" data-select-key="brandId" data-select-value="brandName"
    onchange="selectList()" data-url="/.../queryAll"
    name="brandId" v-model="brandId">
   </select>
   
   
<!--这个是触动第三级的方法-->
   <select id="seriesName" onchange="selectList2()" name="seriesName">	
	      <option value="">${Series.seriesName}</option>
   </select>

<!--这个是用来显示数据的-->
   <span id="seriesId"></span>
   <span id="seriesCode"></span>
   <span id="seriesTypeId"></span>
   <span id="pinyin"></span>

下面的是在JavaScript里面的语句

//二级
function selectList(){
	var brandId = $('#brandId').val();
	//alert(brandId);
	$.ajax({
		url:"/.../queryAll?brandId="+brandId,
		type:"get",
	    dataType:"json",
		async: true,　
		success:function(data){
			if(data=="{}"){
				alert('没有查到数据');
			}else{
				$("#seriesName").html("");
				$.each(data,function(index,itme){ //index相当于下标，item相当于对象，data就是后台传回的一个对象
					//系列名称
					var stam="<option>"+itme.seriesName+"</option>";
					$("#seriesName").append(stam);
					
				}); 
			}
		},
	});		
} 

//三级
function selectList2(){
	var seriesName = $('#seriesName').val();
	//alert(seriesName);
	$.ajax({
		url:"/.../queryAll&seriesName="+seriesName,
		type:"get",
	    dataType:"json",
		async: true,　
		success:function(data){
			if(data=="{}"){
				alert('没有查到数据');
			}else{
				//$("#seriesName").html("");
				$.each(data,function(index,itme){ //index相当于下标，item相当于对象，data就是后台传回的一个对象
					//系id
					var seriesId = itme.seriesId;	
					$("#seriesId").val(seriesId);
					//系编码
					var seriesCode = itme.seriesCode;	
					$("#seriesCode").val(seriesCode);
					//系类型id
					var seriesTypeId = itme.seriesTypeId;	
					$("#seriesTypeId").val(seriesTypeId);
					//拼音
					var pinyin = itme.pinyin;	
					$("#pinyin").val(pinyin);
					
				}); 
			}
		},
	});		
}