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년 전
와우~~ 대단하시네요 ....
멋지네요...
멋지네요...
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7930 | 9년 전 | 407 | ||
| 7929 | 9년 전 | 326 | ||
| 7928 | 9년 전 | 416 | ||
| 7927 | 9년 전 | 330 | ||
| 7926 | 9년 전 | 664 | ||
| 7925 | 9년 전 | 350 | ||
| 7924 | 9년 전 | 336 | ||
| 7923 | 9년 전 | 337 | ||
| 7922 | 9년 전 | 377 | ||
| 7921 | 9년 전 | 395 | ||
| 7920 | 9년 전 | 321 | ||
| 7919 | 9년 전 | 333 | ||
| 7918 | 9년 전 | 487 | ||
| 7917 | 9년 전 | 325 | ||
| 7916 | 9년 전 | 404 | ||
| 7915 | 9년 전 | 401 | ||
| 7914 | 9년 전 | 410 | ||
| 7913 | 9년 전 | 569 | ||
| 7912 | 9년 전 | 416 | ||
| 7911 | 9년 전 | 363 | ||
| 7910 | 9년 전 | 407 | ||
| 7909 | 9년 전 | 505 | ||
| 7908 | 9년 전 | 425 | ||
| 7907 | 9년 전 | 367 | ||
| 7906 | 9년 전 | 391 | ||
| 7905 | 9년 전 | 369 | ||
| 7904 | 9년 전 | 351 | ||
| 7903 | 9년 전 | 344 | ||
| 7902 | 9년 전 | 560 | ||
| 7901 |
 돼지코구뇽 |
9년 전 | 730 | |
| 7900 | 9년 전 | 584 | ||
| 7899 | 9년 전 | 378 | ||
| 7898 | 9년 전 | 382 | ||
| 7897 | 9년 전 | 340 | ||
| 7896 | 9년 전 | 357 | ||
| 7895 | 9년 전 | 465 | ||
| 7894 | 9년 전 | 388 | ||
| 7893 | 9년 전 | 333 | ||
| 7892 | 9년 전 | 390 | ||
| 7891 | 9년 전 | 763 | ||
| 7890 | 9년 전 | 1193 | ||
| 7889 | 9년 전 | 743 | ||
| 7888 |
limsy1987
|
9년 전 | 544 | |
| 7887 | 9년 전 | 545 | ||
| 7886 | 9년 전 | 435 | ||
| 7885 | 9년 전 | 403 | ||
| 7884 | 9년 전 | 405 | ||
| 7883 | 9년 전 | 398 | ||
| 7882 | 9년 전 | 448 | ||
| 7881 | 9년 전 | 435 | ||
| 7880 | 9년 전 | 559 | ||
| 7879 | 9년 전 | 459 | ||
| 7878 | 9년 전 | 1213 | ||
| 7877 | 9년 전 | 746 | ||
| 7876 | 9년 전 | 482 | ||
| 7875 | 9년 전 | 557 | ||
| 7874 |
 뜨거운형제들 |
9년 전 | 806 | |
| 7873 | 9년 전 | 516 | ||
| 7872 | 9년 전 | 672 | ||
| 7871 | 9년 전 | 477 | ||
| 7870 | 9년 전 | 605 | ||
| 7869 | 9년 전 | 435 | ||
| 7868 | 9년 전 | 440 | ||
| 7867 | 9년 전 | 422 | ||
| 7866 | 9년 전 | 485 | ||
| 7865 | 9년 전 | 451 | ||
| 7864 | 9년 전 | 512 | ||
| 7863 | 9년 전 | 506 | ||
| 7862 | 9년 전 | 463 | ||
| 7861 | 9년 전 | 629 | ||
| 7860 | 9년 전 | 620 | ||
| 7859 | 9년 전 | 408 | ||
| 7858 | 9년 전 | 701 | ||
| 7857 | 9년 전 | 1070 | ||
| 7856 | 9년 전 | 518 | ||
| 7855 | 9년 전 | 750 | ||
| 7854 | 9년 전 | 729 | ||
| 7853 | 9년 전 | 577 | ||
| 7852 | 9년 전 | 507 | ||
| 7851 | 9년 전 | 504 | ||
| 7850 | 9년 전 | 582 | ||
| 7849 | 9년 전 | 355 | ||
| 7848 | 9년 전 | 409 | ||
| 7847 | 9년 전 | 649 | ||
| 7846 | 9년 전 | 453 | ||
| 7845 | 9년 전 | 413 | ||
| 7844 | 9년 전 | 390 | ||
| 7843 | 9년 전 | 410 | ||
| 7842 | 9년 전 | 396 | ||
| 7841 | 9년 전 | 382 | ||
| 7840 | 9년 전 | 405 | ||
| 7839 | 9년 전 | 434 | ||
| 7838 | 9년 전 | 518 | ||
| 7837 | 9년 전 | 354 | ||
| 7836 | 9년 전 | 397 | ||
| 7835 | 9년 전 | 472 | ||
| 7834 |
 ABC디자인 |
9년 전 | 1192 | |
| 7833 | 9년 전 | 424 | ||
| 7832 | 9년 전 | 411 | ||
| 7831 | 9년 전 | 560 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기