이전
목록
다음
아

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

아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2011-11-02 (수) 05:29:35 · 5883 · 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
11-09-19 조회 2,554
11-09-19 조회 2,476
11-09-19 조회 5,487
11-09-19 조회 6,135
11-09-16 조회 2,859
11-09-16 조회 3,111
11-09-16 조회 6,310
11-09-15 조회 3,081
11-09-15 조회 2,842
11-09-15 조회 2,509
11-09-15 조회 2,514
11-09-15 조회 2,707
11-09-15 조회 2,673
11-09-15 조회 2,792
11-09-14 조회 2,707
11-09-14 조회 3,271
11-09-14 조회 2,378
11-09-14 조회 2,302
11-09-14 조회 2,290
11-09-13 조회 2,473
11-09-10 조회 2,941
11-09-10 조회 2,565
11-09-09 조회 3,146
11-09-09 조회 3,005
11-09-09 조회 3,079
11-09-09 조회 3,125
11-09-08 조회 3,809
11-09-08 조회 5,009
11-09-08 조회 3,399
11-09-08 조회 4,335
11-09-08 조회 3,837
11-09-08 조회 3,638
11-09-08 조회 2,736
11-09-08 조회 2,301
11-09-08 조회 2,710
11-09-08 조회 2,826
11-09-07 조회 3,497
11-09-07 조회 3,557
11-09-07 조회 2,974
11-09-07 조회 2,681
11-09-07 조회 2,782
11-09-07 조회 2,802
11-09-07 조회 3,031
11-09-07 조회 2,298
11-09-07 조회 2,401
11-09-07 조회 2,559
11-09-07 조회 3,492
11-09-07 조회 2,771
11-09-06 조회 2,605
11-09-06 조회 2,879
11-09-06 조회 2,449
11-09-05 조회 2,657
11-09-05 조회 2,602
11-09-05 조회 2,882
11-09-05 조회 2,391
11-09-04 조회 2,360
11-09-04 조회 2,328
11-09-03 조회 2,498
11-09-03 조회 2,656
11-09-02 조회 3,391
11-09-02 조회 2,775
11-09-02 조회 2,636
11-09-02 조회 3,551
11-09-02 조회 2,580
11-09-02 조회 2,459
11-09-02 조회 2,462
11-09-01 조회 2,665
11-09-01 조회 2,807
11-09-01 조회 2,692
11-09-01 조회 2,688
11-09-01 조회 2,832
11-09-01 조회 2,685
11-09-01 조회 4,125
11-09-01 조회 3,723
11-09-01 조회 4,378
11-08-31 조회 2,258
11-08-31 조회 2,566
11-08-31 조회 2,857
11-08-31 조회 2,577
11-08-31 조회 2,423
11-08-31 조회 3,221
11-08-30 조회 2,972
11-08-30 조회 4,201
11-08-29 조회 2,970
11-08-29 조회 2,562
11-08-29 조회 5,174
11-08-29 조회 3,302
11-08-29 조회 2,713
11-08-29 조회 3,067
11-08-28 조회 2,468
11-08-28 조회 3,611
11-08-28 조회 2,567
11-08-28 조회 2,937
11-08-26 조회 2,470
11-08-26 조회 2,981
11-08-26 조회 3,214
11-08-26 조회 2,720
11-08-25 조회 2,555
11-08-25 조회 2,865
11-08-25 조회 2,590
글쓰기