layui 기반 성도 3급 연결 (데이터 상호작용)

5281 단어
프로젝트에서 성, 시내의 3급 연동의 한 효과를 썼다
그래서layui의 하단 상자와 리셋을 빌려ajax로 동적 성도 3급 연결을 요청합니다
말이 많지 않으면 코드를 말해라.
html 코드:
"labcon layui-form farm_selet">
"province">
"city">
"area">
"area_text">

js 코드는 다음과 같습니다.
//       
function provincialLevel(){
	/*    */
getPost(urlListByParentId,{"parentId":0},localStorage.getItem("ACCESSTOKEN"),function(res){
	if(res.respCode == 0){
		if(res.obj.list.length>0){
			var str="";
			res.obj.list.forEach(function(ele,index){
				str='+ele.areaName+'';
				$('.company_info .province select').append(str);
			})
			form.render('select');
		}
		
	}
})
/*    */
form.on('select(province)',function(data){
	$('.company_info .city select').empty();//              
	$('.company_info .city select').html('');
	$('.company_info .area select').empty();
	$('.company_info .area select').html('');
	if(data.value){
		var ajaxJson = {
			  	"parentId":data.value
			}
		getPost(urlListByParentId,ajaxJson,localStorage.getItem("ACCESSTOKEN"),function(res){
			if(res.respCode == 0){
				if(res.obj.list.length>0){
					var str="";
					res.obj.list.forEach(function(ele,index){
						str='+ele.areaName+'';
						$('.company_info .city select').append(str);
					})
					form.render('select');
				}
			}
		})
	}
})
/*    */
form.on('select(city)',function(data){
	$('.company_info .area select').empty();//           
	$('.company_info .area select').html('');
	if(data.value){
		var ajaxJson = {
			  	"parentId":data.value
			}
		getPost(urlListByParentId,ajaxJson,localStorage.getItem("ACCESSTOKEN"),function(res){
			if(res.respCode == 0){
				if(res.obj.list.length>0){
					var str="";
					res.obj.list.forEach(function(ele,index){
						str='+ele.areaName+'';
						$('.company_info .area select').append(str);
					})
					form.render('select');
					}
				}
			})
		}
	})
}

전반적으로 말하면 비교적 간단하다. 그의 논리를 이해하는 것은 사실 매우 간단하다. 봉해서 가져가 써라.
전재 대상:https://juejin.im/post/5ba0be745188255c6815765a

좋은 웹페이지 즐겨찾기