사이트 구축·운영 인사이트, SIR 블로그
이전
목록
다음
아

[jQuery] 상위부터 차례로 지역 선택하기

아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2011-11-02 (수) 05:29:35 · 5862 · 6
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)
    });
});

#개발자팁 #개발자 #팁자료실 #jquery
|

댓글 6개

아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-02 (수) 05:32:41
서버 없이 돌아가는 코드를 만들기 위해 네이버 지도가 사용하는 API를 몰래 썼습니다.

실제로 서비스하실 땐 저 부분을 바꿔줘야겠죠? 그러면 YQL을 쓸 이유도 없구요.
시하
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-02 (수) 10:31:06
내공이 상당하신 분 같네요^^
좋은 팁 자주 올려주시면 감사하겠습니다~
명랑폐인
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-02 (수) 13:43:17
짧은 코드안에 jquery의 많은 부분이 심플하게 구성되어 있네요.
jquery 공부하는 입장에서도 좋은 소스같습니다.
감사합니다.
행복한남자
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-04 (금) 13:57:16
감사합니다...^^
아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-06 (일) 14:45:20
서버에 올려놨습니다. 어떤 건지 결과물부터 보고 싶은 분은... http://j.mp/vRyafl
붉은바람
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-01-19 (목) 18:50:15
와우~~ 대단하시네요 ....

멋지네요...
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-01-22 조회 3,686
12-01-21 조회 3,041
12-01-19 조회 4,881
12-01-18 조회 2,896
12-01-18 조회 2,852
12-01-18 조회 3,045
12-01-17 조회 2,831
12-01-17 조회 3,101
12-01-14 조회 1.1만
12-01-14 조회 3,627
12-01-14 조회 3,940
12-01-11 조회 3,389
12-01-11 조회 3,122
12-01-11 조회 3,123
12-01-11 조회 3,232
12-01-11 조회 3,446
12-01-11 조회 2,765
12-01-10 조회 3,080
12-01-10 조회 2,872
12-01-10 조회 2,903
12-01-09 조회 2,890
12-01-08 조회 2,982
12-01-07 조회 2,973
12-01-06 조회 2,712
12-01-06 조회 2,830
12-01-05 조회 2,817
12-01-02 조회 2,973
11-12-29 조회 2,962
11-12-28 조회 2,939
11-12-28 조회 2,850
11-12-27 조회 3,065
11-12-23 조회 2,809
11-12-23 조회 2,936
11-12-21 조회 3,931
11-12-21 조회 2,967
11-12-19 조회 2,896
11-12-14 조회 4,317
11-12-08 조회 3,457
11-12-08 조회 4,104
11-12-07 조회 4,379
11-12-06 조회 4,281
11-12-06 조회 3,663
11-12-05 조회 3,307
11-12-05 조회 4,903
11-12-04 조회 3,302
11-12-03 조회 3,612
11-12-02 조회 3,534
11-12-02 조회 3,521
11-12-02 조회 2,849
11-12-01 조회 2,841
11-12-01 조회 3,731
11-12-01 조회 2,817
11-11-29 조회 5,674
11-11-23 조회 3,614
11-11-23 조회 3,962
11-11-22 조회 3,957
11-11-22 조회 3,011
11-11-21 조회 3,542
11-11-21 조회 2,839
11-11-18 조회 3,955
11-11-18 조회 3,084
11-11-17 조회 2,968
11-11-17 조회 2,988
11-11-17 조회 4,564
11-11-11 조회 2,840
11-11-11 조회 2,836
11-11-11 조회 3,965
11-11-11 조회 4,671
11-11-08 조회 2,971
11-11-06 조회 3,408
11-11-06 조회 3,714
11-10-21 조회 2,516
11-10-21 조회 2,430
11-10-19 조회 2,496
11-10-19 조회 4,003
11-10-08 조회 2,532
11-10-06 조회 4,222
11-10-01 조회 2,633
11-09-30 조회 2,597
11-09-29 조회 2,589
11-09-26 조회 2,460
11-09-23 조회 2,476
11-09-23 조회 2,222
11-09-22 조회 2,800
11-09-09 조회 3,105
11-08-30 조회 4,189
11-08-23 조회 2,229
11-08-12 조회 2,422
11-08-04 조회 3,988
11-07-01 조회 2,968
11-06-09 조회 2,605
11-05-17 조회 2,731
11-05-07 조회 2,988
11-04-21 조회 2,674
11-04-12 조회 2,533
11-04-11 조회 3,618
11-02-11 조회 2,736
11-02-08 조회 2,211
11-01-11 조회 2,586
10-11-26 조회 3,912
글쓰기