Jquery实现省市区联动

利用jquery实现从xml读取省市区信息联动插件。 
备注：代码中是读取xml/province_city.xml，视情况自行修改。

/**
 * 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;
};