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

[jQuery] 상위부터 차례로 지역 선택하기 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

본문

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)
    });
});