단순 실 용 jquery 판 3 급 연동 select 예제

html 와 js 부분

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=gbk /> 
<title>selectList</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.selectList{width:200px;margin:50px auto;} 
</style> 
<script type="text/javascript" src="jquery1.7.1.js"></script> 
</head> 
<body> 
<div class="selectList"> 
<select class="province"> 
<option>   </option> 
</select> 
<select class="city"> 
<option>   </option> 
</select> 
<select class="district"> 
<option>   </option> 
</select> 
</div> 
<div class="selectList"> 
<select class="province"> 
<option>   </option> 
</select> 
<select class="city"> 
<option>   </option> 
</select> 
<select class="district"> 
<option>   </option> 
</select> 
</div> 
<script type="text/javascript"> 
$(function(){ 
$(".selectList").each(function(){ 
var url = "area.json"; 
var areaJson; 
var temp_html; 
var oProvince = $(this).find(".province"); 
var oCity = $(this).find(".city"); 
var oDistrict = $(this).find(".district"); 
//     
var province = function(){ 
$.each(areaJson,function(i,province){ 
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>"; 
}); 
oProvince.html(temp_html); 
city(); 
}; 
//    
var city = function(){ 
temp_html = ""; 
var n = oProvince.get(0).selectedIndex; 
$.each(areaJson[n].c,function(i,city){ 
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>"; 
}); 
oCity.html(temp_html); 
district(); 
}; 
//    
var district = function(){ 
temp_html = ""; 
var m = oProvince.get(0).selectedIndex; 
var n = oCity.get(0).selectedIndex; 
if(typeof(areaJson[m].c[n].d) == "undefined"){ 
oDistrict.css("display","none"); 
}else{ 
oDistrict.css("display","inline"); 
$.each(areaJson[m].c[n].d,function(i,district){ 
temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>"; 
}); 
oDistrict.html(temp_html); 
}; 
}; 
//       
oProvince.change(function(){ 
city(); 
}); 
//       
oCity.change(function(){ 
district(); 
}); 
//  json   
$.getJSON(url,function(data){ 
areaJson = data; 
province(); 
}); 
}); 
}); 
</script> 
</body> 
</html>

json 파일(area.json)은 사례 일 뿐 상황 에 따라 추가 하거나 작성

 
[ 
{"p":"   ", 
"c":[ 
{"ct":"   ", 
"d":[ 
{"dt":"   "}, 
{"dt":"   "}, 
{"dt":"   "} 
]}, 
{"ct":"   ", 
"d":[ 
{"dt":"   "}, 
{"dt":"   "}, 
{"dt":"   "} 
]} 
]}, 
{"p":"  ", 
"c":[ 
{"ct":"   "}, 
{"ct":"   "} 
]}, 
{"p":"   ", 
"c":[ 
{"ct":"   ", 
"d":[ 
{"dt":"   "}, 
{"dt":"   "}, 
{"dt":"   "} 
]}, 
{"ct":"   ", 
"d":[ 
{"dt":"   "}, 
{"dt":"   "}, 
{"dt":"   "} 
]} 
]} 
]

하 는 것 이 좋 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

TIL: Go에서 다른 서버를 수신하는 방법(select 사용)

오늘 저는 기존 코드베이스를 리팩토링하여 Go에서 다른 서버를 수신하는 방법을 배웠습니다. 이 리팩토링의 목표는 "인위적인"문을 만드는 대신 select 문을 올바르게 사용하는 것이었습니다. 이것이 시작점입니다. 리...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

단순 실 용 jquery 판 3 급 연동 select 예제

좋은 웹페이지 즐겨찾기