Jquery 성 시내 연동 실현

/**
 * jQuery :         
 * @author   kxt
 * @example  $("#test").province_city_county();
 */
$.fn.province_city_county = function(v_province,v_city,v_county){
    var _self = this;
    //  3      
    //_self.append("<select id='province' name='province'></select>");
    //_self.append("<select id='city' name='city'></select>");
    //_self.append("<select id='county' name='county'></select>");
    _self.html("<select id='province' name='province' style='width: 100px'></select>" +
            "<select id='city' name='city' style='width: 100px'></select>" +
            "<select id='county' name='county' style='width: 100px'></select>");
    //    3    
    var sel1 = _self.find("select").eq(0);
    var sel2 = _self.find("select").eq(1);
    var sel3 = _self.find("select").eq(2);
    
    //  3    
    _self.data("province",["   ", ""]);
    _self.data("city",["   ", ""]);
    _self.data("county",["   ", ""]);
    //      
    if(_self.data("province")){
        sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
    }
    //      
    if(_self.data("city")){
        sel2.append("<option value='"+_self.data("city")[1]+"'>"+_self.data("city")[0]+"</option>");
    }
    //      
    if(_self.data("county")){
        sel3.append("<option value='"+_self.data("county")[1]+"'>"+_self.data("county")[0]+"</option>");
    }
    $.get('js/province_city.xml', function(data){
        var arrList = [];
        $(data).find('province').each(function(){
            var $province = $(this);
            sel1.append("<option value='"+$province.attr('value')+"'>"+$province.attr('value')+"</option>");
        });
        if(typeof v_province != 'undefined'){
            sel1.val(v_province);
            sel1.change();
        }
    });
     
    //      
    var index1 = "" ;
    var provinceValue = "";
    var cityValue = "";
    sel1.change(function(){
        //    2    
        sel2[0].options.length=0;
        sel3[0].options.length=0;
        index1 = this.selectedIndex;
        if(index1 == 0){    //      "   "  
            if(_self.data("city")){
                sel2.append("<option value='"+_self.data("city")[1]+"'>"+_self.data("city")[0]+"</option>");
            }
            if(_self.data("county")){
                sel3.append("<option value='"+_self.data("county")[1]+"'>"+_self.data("county")[0]+"</option>");
            }
        } else{
            provinceValue = $('#province').val();
            $.get('js/province_city.xml', function(data){
                $(data).find("province[value='"+provinceValue+"'] > city").each(function(){
                    var $city = $(this);
                    sel2.append("<option value='"+$city.attr('value')+"'>"+$city.attr('value')+"</option>");
                });
                cityValue = $("#city").val();
                $(data).find("city[value='"+cityValue+"'] > county").each(function(){
                    var $county = $(this);
                    sel3.append("<option value='"+$county.attr('value')+"'>"+$county.attr('value')+"</option>");
                });
 
                if(typeof v_city != 'undefined'){
                    sel2.val(v_city);
                    sel2.change();
                }
 
                if(typeof v_county != 'undefined'){
                    sel3.val(v_county);
                }
            });
        }
    }).change();
    //      
    sel2.change(function(){
        sel3[0].options.length=0;
        var cityValue2 = $('#city').val();
        $.get('js/province_city.xml', function(data){
            $(data).find("city[value='"+cityValue2+"'] > county").each(function(){
                var $county = $(this);
                sel3.append("<option value='"+$county.attr('value')+"'>"+$county.attr('value')+"</option>");
            });
            if(typeof v_county != 'undefined'){
                sel3.val(v_county);
            }
        });
    }).change();
    return _self;
};