http://sir.co.kr/bbs/board.php?bo_table=pg_qa&wr_id=4055
이 글을 보고 간단히 만들어 봤습니다.
index.html
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Real-time Address</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<select>
<option value="">광역시/도</option>
</select>
<select>
<option value="">시/도/군</option>
</select>
<select>
<option value="">읍/면/동</option>
</select>
</div>
</body>
</html>
stylesheet.css
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#content {
margin: 30px;
padding: 20px;
background: #7CF;
}
application.js
$(function() {
var uniqueId = 0;
function ajaxYqlWithJson(options) {
var callbackName = 'my_yql_callback_' + ++uniqueId;
window[callbackName] = options.callback;
var yql = 'SELECT * FROM json WHERE url="' + encodeURIComponent(options.url) + '"';
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql?q=' + yql +
'&format=json&callback=' + callbackName,
dataType: 'script',
complete: function() {
delete window[callbackName];
}
});
}
function createSelectCallback(index) {
return function(data) {
var select = $('select').eq(index);
$(data.query.results.result.subRegion).each(function(i, region) {
$('<option></option>').attr('value', region.code).text(region.name)
.appendTo(select);
});
};
}
function clearSelect(select) {
select.html(select.children().first());
}
function ajaxGetRegions(options) {
var level = options.level;
var code = options.code;
if (code && level <= 8) {
ajaxYqlWithJson({
url: 'http://map.naver.com/common2/getBRegionByCodeAndLevel.nhn' +
'?level=' + level + '&code=' + code,
callback: options.callback
});
}
}
$('select').each(function(index, select) {
$(select).change(function() {
for (var i = index + 1; i < $('select').length; i++) {
clearSelect($('select').eq(i));
}
ajaxGetRegions({
level: 2 + 3 * (index + 1),
code: $(this).val(),
callback: createSelectCallback(index + 1)
})
});
});
ajaxYqlWithJson({
url: 'http://map.naver.com/common2/getBRegionByCodeAndLevel.nhn?level=2',
callback: createSelectCallback(0)
});
});
이 글을 보고 간단히 만들어 봤습니다.
index.html
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Real-time Address</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<select>
<option value="">광역시/도</option>
</select>
<select>
<option value="">시/도/군</option>
</select>
<select>
<option value="">읍/면/동</option>
</select>
</div>
</body>
</html>
stylesheet.css
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#content {
margin: 30px;
padding: 20px;
background: #7CF;
}
application.js
$(function() {
var uniqueId = 0;
function ajaxYqlWithJson(options) {
var callbackName = 'my_yql_callback_' + ++uniqueId;
window[callbackName] = options.callback;
var yql = 'SELECT * FROM json WHERE url="' + encodeURIComponent(options.url) + '"';
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql?q=' + yql +
'&format=json&callback=' + callbackName,
dataType: 'script',
complete: function() {
delete window[callbackName];
}
});
}
function createSelectCallback(index) {
return function(data) {
var select = $('select').eq(index);
$(data.query.results.result.subRegion).each(function(i, region) {
$('<option></option>').attr('value', region.code).text(region.name)
.appendTo(select);
});
};
}
function clearSelect(select) {
select.html(select.children().first());
}
function ajaxGetRegions(options) {
var level = options.level;
var code = options.code;
if (code && level <= 8) {
ajaxYqlWithJson({
url: 'http://map.naver.com/common2/getBRegionByCodeAndLevel.nhn' +
'?level=' + level + '&code=' + code,
callback: options.callback
});
}
}
$('select').each(function(index, select) {
$(select).change(function() {
for (var i = index + 1; i < $('select').length; i++) {
clearSelect($('select').eq(i));
}
ajaxGetRegions({
level: 2 + 3 * (index + 1),
code: $(this).val(),
callback: createSelectCallback(index + 1)
})
});
});
ajaxYqlWithJson({
url: 'http://map.naver.com/common2/getBRegionByCodeAndLevel.nhn?level=2',
callback: createSelectCallback(0)
});
});
댓글 6개
14년 전
서버 없이 돌아가는 코드를 만들기 위해 네이버 지도가 사용하는 API를 몰래 썼습니다.
실제로 서비스하실 땐 저 부분을 바꿔줘야겠죠? 그러면 YQL을 쓸 이유도 없구요.
실제로 서비스하실 땐 저 부분을 바꿔줘야겠죠? 그러면 YQL을 쓸 이유도 없구요.
14년 전
내공이 상당하신 분 같네요^^
좋은 팁 자주 올려주시면 감사하겠습니다~
좋은 팁 자주 올려주시면 감사하겠습니다~
14년 전
짧은 코드안에 jquery의 많은 부분이 심플하게 구성되어 있네요.
jquery 공부하는 입장에서도 좋은 소스같습니다.
감사합니다.
jquery 공부하는 입장에서도 좋은 소스같습니다.
감사합니다.
행복한남자
14년 전
감사합니다...^^
14년 전
서버에 올려놨습니다. 어떤 건지 결과물부터 보고 싶은 분은... http://j.mp/vRyafl
13년 전
와우~~ 대단하시네요 ....
멋지네요...
멋지네요...
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4430 | 13년 전 | 821 | ||
| 4429 | 13년 전 | 1148 | ||
| 4428 | 13년 전 | 1940 | ||
| 4427 | 13년 전 | 1059 | ||
| 4426 | 13년 전 | 521 | ||
| 4425 | 13년 전 | 9874 | ||
| 4424 |
 디자인하라 |
13년 전 | 839 | |
| 4423 |
 넓은마인드 |
13년 전 | 700 | |
| 4422 |
aequum
|
13년 전 | 1285 | |
| 4421 | 13년 전 | 2406 | ||
| 4420 | 13년 전 | 1204 | ||
| 4419 | 13년 전 | 889 | ||
| 4418 |
한번잘해보자
|
13년 전 | 671 | |
| 4417 | 13년 전 | 1577 | ||
| 4416 | 13년 전 | 870 | ||
| 4415 | 13년 전 | 2249 | ||
| 4414 | 13년 전 | 673 | ||
| 4413 | 13년 전 | 675 | ||
| 4412 | 13년 전 | 813 | ||
| 4411 | 13년 전 | 1436 | ||
| 4410 |
넓은마인드 |
13년 전 | 692 | |
| 4409 | 13년 전 | 2164 | ||
| 4408 |
visualp
|
13년 전 | 531 | |
| 4407 |
visualp
|
13년 전 | 3086 | |
| 4406 |
visualp
|
13년 전 | 3250 | |
| 4405 |
visualp
|
13년 전 | 3150 | |
| 4404 |
visualp
|
13년 전 | 2976 | |
| 4403 |
넓은마인드 |
13년 전 | 665 | |
| 4402 |
gender
|
13년 전 | 617 | |
| 4401 | 13년 전 | 1111 | ||
| 4400 |
aequum
|
13년 전 | 1376 | |
| 4399 | 13년 전 | 579 | ||
| 4398 | 13년 전 | 667 | ||
| 4397 |
넓은마인드 |
13년 전 | 577 | |
| 4396 |
aequum
|
13년 전 | 4657 | |
| 4395 |
넓은마인드 |
13년 전 | 544 | |
| 4394 |
aequum
|
13년 전 | 4929 | |
| 4393 |
 jakekwak |
13년 전 | 1260 | |
| 4392 | 13년 전 | 1053 | ||
| 4391 |
mirrV
|
13년 전 | 528 | |
| 4390 |
파워웹프로
|
13년 전 | 701 | |
| 4389 | 13년 전 | 1222 | ||
| 4388 |
Coding
|
13년 전 | 697 | |
| 4387 |
aequum
|
13년 전 | 1354 | |
| 4386 | 13년 전 | 867 | ||
| 4385 | 13년 전 | 722 | ||
| 4384 | 13년 전 | 785 | ||
| 4383 | 13년 전 | 2899 | ||
| 4382 | 13년 전 | 605 | ||
| 4381 | 13년 전 | 1167 | ||
| 4380 | 13년 전 | 803 | ||
| 4379 |
 cshop |
13년 전 | 746 | |
| 4378 | 13년 전 | 663 | ||
| 4377 | 13년 전 | 3297 | ||
| 4376 |
aequum
|
13년 전 | 1209 | |
| 4375 |
클로로다인
|
13년 전 | 646 | |
| 4374 |
DDFACTORY
|
13년 전 | 719 | |
| 4373 |
까탈스런ET
|
13년 전 | 705 | |
| 4372 | 13년 전 | 801 | ||
| 4371 | 13년 전 | 562 | ||
| 4370 |
 pjhsir |
13년 전 | 643 | |
| 4369 |
프리프리닷
|
13년 전 | 1299 | |
| 4368 | 13년 전 | 3164 | ||
| 4367 |
soing
|
13년 전 | 1573 | |
| 4366 |
 소울페이지 |
13년 전 | 683 | |
| 4365 |
소울페이지 |
13년 전 | 622 | |
| 4364 |
소울페이지 |
13년 전 | 756 | |
| 4363 |
소울페이지 |
13년 전 | 621 | |
| 4362 |
소울페이지 |
13년 전 | 722 | |
| 4361 |
소울페이지 |
13년 전 | 839 | |
| 4360 |
소울페이지 |
13년 전 | 648 | |
| 4359 |
소울페이지 |
13년 전 | 3123 | |
| 4358 |
소울페이지 |
13년 전 | 3038 | |
| 4357 | 13년 전 | 840 | ||
| 4356 | 13년 전 | 1338 | ||
| 4355 | 13년 전 | 965 | ||
| 4354 | 13년 전 | 814 | ||
| 4353 | 13년 전 | 3372 | ||
| 4352 | 13년 전 | 2372 | ||
| 4351 | 13년 전 | 1959 | ||
| 4350 |
jakekwak |
13년 전 | 1872 | |
| 4349 | 13년 전 | 644 | ||
| 4348 |
aequum
|
13년 전 | 1405 | |
| 4347 | 13년 전 | 655 | ||
| 4346 |
 TopSchooL |
13년 전 | 563 | |
| 4345 | 13년 전 | 593 | ||
| 4344 |
aequum
|
13년 전 | 999 | |
| 4343 |
cshop |
13년 전 | 1036 | |
| 4342 |
aequum
|
13년 전 | 1626 | |
| 4341 | 13년 전 | 796 | ||
| 4340 |
2번호랑이
|
13년 전 | 1000 | |
| 4339 |
TopSchooL |
13년 전 | 1166 | |
| 4338 | 13년 전 | 1163 | ||
| 4337 | 13년 전 | 519 | ||
| 4336 |
aequum
|
13년 전 | 1703 | |
| 4335 | 13년 전 | 879 | ||
| 4334 | 13년 전 | 1178 | ||
| 4333 |
Sturmvogel
|
13년 전 | 956 | |
| 4332 |
aequum
|
13년 전 | 1280 | |
| 4331 |
aequum
|
13년 전 | 1391 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기