jqeury制作省市县三级联动控件

调用方法：_citypicker.addEvent4Obj(inputId);

var _citypicker = {
    initData : function() {
        /**var areas = getAreas(); // 从服务器获取数据
        var provinces = [], citys = [], districts = [];
        for(var i in areas) {
            var data = areas[i];
            if(data.TYPE == '2') {
                provinces.push(data);
            } else if(data.TYPE == '3'){
                citys.push(data);
            } else if(data.TYPE == '4') {
                districts.push(data);
            }
        }
        var datas = {province : provinces, city : citys, district : districts};
    // datas格式如下：
    var datas = {
        province:[{'ID':'01', 'PARENT_ID':'00', 'NAME':'北京', 'TYPE':'2'}, 
        {'ID':'02', 'PARENT_ID':'00', 'NAME':'河北省', 'TYPE':'2'}],
        city:[{'ID':'03', 'PARENT_ID':'01', 'NAME':'北京市区', 'TYPE':'3'}, 
        {'ID':'04', 'PARENT_ID':'02', 'NAME':'唐山市', 'TYPE':'3'}],
        district:[{'ID':'05', 'PARENT_ID':'03', 'NAME':'海淀区', 'TYPE':'4'}, 
        {'ID':'06', 'PARENT_ID':'04', 'NAME':'曹妃甸区', 'TYPE':'3'}]
    };
        */
        $("body").append('
' + JSON.stringify(datas) + '
');
}(),
addEvent4Obj : function(objId) {
var self = this;
var $obj = $("#" + objId);
$obj.focus(function(e) {
var offset = $obj.offset();
var $cp = $("#_citypicker");
if($cp.length == 0) {
$("body").append(self.genUI(e));
$cp = $("#_citypicker");
}
var $tabs = $cp.find("._area-tab");
var len = $tabs.length;
// 下面代码可以优化
if($obj.attr("areaIds") && $obj.attr("parentIds") && $obj.attr("types")) {
var names = $obj.val().split("-");
var areaIds = $obj.attr("areaIds").split("-");
var parentIds = $obj.attr("parentIds").split("-");
var types = $obj.attr("types").split("-");
for(var i = 0; i < len; i++) {
$tabs.eq(i).text(names[i]).attr("areaId", areaIds[i]).attr("parentId", parentIds[i]).attr("type", types[i]);
}
$cp.css("left", offset.left + 'px').css("top", offset.top + $obj.height() + 2 + 'px').fadeIn();
self.fillData4UI();
self.listener4Tab($("#" + objId));
} else {
for(var i = 0; i < len; i++) {
$tabs.eq(i).text("请选择").removeAttr("areaId").removeAttr("parentId").removeAttr("type");
}
$cp.css("left", offset.left + 'px').css("top", offset.top + $obj.height() + 2 + 'px').fadeIn();
self.fillData4UI();
self.listener4Tab($("#" + objId));
$tabs.eq(0).click();
}
});
},
genUI : function(e) {
var ev = e || e.event;
if($("#_citypicker").length > 0) {
return $("#_citypicker");
}
var div = '';
div += '
';
div += ' ';
div += ' 
';
div += ' 
';
div += ' 
请选择
';
div += ' 
请选择
';
div += ' 
请选择
';
div += ' 
';
div += ' 
';
div += ' 
';
div += ' 
';
div += ' 
';
div += '
';
return $(div);
},
fillData4UI : function() {
var datas = eval('(' + $("#_areasData").html() + ')');
this.genDataRow(datas, "province");
this.genDataRow(datas, "city");
this.genDataRow(datas, "district");
},
genDataRow : function(datas, key) {
var data = datas[key];
var html = '';
var parentId = $("#_" + key + "-tab").prev().attr("areaId");
for(var i in data) {
var single = data[i];
var name = single.NAME;
var theParentId = single.PARENT_ID;
if(!parentId || parentId == theParentId) {
if(name.length < 6) {
html += '
;
} else {
html += '
;
}
} else {
if(name.length < 6) {
html += '
;
} else {
html += '
;
}
}
html += ' areaId="' + single.ID + '"';
html += ' parentId="' + single.PARENT_ID + '"';
html += ' type="' + single.TYPE + '">';
html += ' ' + data[i].NAME + '';
html += '
';
}
$("#_" + key).empty().append($(html));
},
listener4Tab : function($obj) {
var self = this;
$("#_citypicker").on("click", "._area-list-item", function() {
var $t = $(this);
var type = $t.attr("type");
var $activeTab = $("#_tabs ._tabs-active");
$activeTab.text($t.text())
.attr({"areaId" : $t.attr("areaId"), "type" : $t.attr("type"), "parentId" : $t.attr("parentId")});
var $next = $activeTab.next();
if($next.length > 0) {
var parentId = $activeTab.removeClass("_tabs-active").attr("areaId");
var activeTabId = $next.removeClass("hide").addClass("_tabs-active").attr("id");
self.showArea(activeTabId, parentId);
} else {
$("#_citypicker").hide();
var detailArea = "";
var areaId1 = "", parentId1 = "", type1 = "";
$("#_tabs ._area-tab").each(function() {
var $sef = $(this);
detailArea += $sef.text() + "-";
areaId1 += $sef.attr("areaId") + "-";
parentId1 += $sef.attr("parentId") + "-";
type1 += $sef.attr("type") + "-";
});
detailArea = detailArea.substr(0, detailArea.length - 1);
areaId1 = areaId1.substr(0, areaId1.length - 1);
parentId1 = parentId1.substr(0, parentId1.length - 1);
type1 = type1.substr(0, type1.length - 1);
$obj.val(detailArea).attr('areaIds', areaId1).attr('parentIds', parentId1).attr('types', type1);
$("#_citypicker").off("click");
}
}).on("click", "._area-tab", function() {
var $t = $(this);
$t.addClass("_tabs-active").siblings().removeClass("_tabs-active");
var $nextAll = $t.nextAll();
if($nextAll.length > 0) {
$nextAll.addClass("hide").text("请选择").removeAttr("areaId").removeAttr("parentId").removeAttr("type");
}
var $prev = $t.prev();
if($prev.length > 0) {
self.showArea($t.attr("id"), $prev.attr("areaId"));
} else {
self.showArea($t.attr("id"));
}
});
},
showArea : function(activeTabId, parentId) {
var areaId = activeTabId.replace("-tab", "");
var $nextArea = $("#" + areaId);
if(parentId) {
$nextArea.find("._area-list-item").hide();
$nextArea.find("._area-list-item[parentId='" + parentId + "']").show();
} else {
$nextArea.find("._area-list-item").show();
}
$nextArea.removeClass("hide").siblings("._area").addClass("hide");
}
}