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('<div id="_areasData" style="display:none">' + JSON.stringify(datas) + '</div>');
    }(),

    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 id="_citypicker" style="margin:0;padding:10px;background-color:#fff;position:absolute;z-index:8888;width:390px;min-height:300px;border:1px solid #cecdce;display:none;">';
        div += '    <style type="text/css">';
        div += '        #_tabs {border-bottom:2px solid #edd28b; height:25px;width:100%;}';
        div += '        #_tabs li {width:80px;line-height:23px;height:24px;overflow:hidden;background-color:#fff;text-align:center;float:left;border:1px solid #ccc;margin:0 3px;border-bottom:0;}';
        div += '        #_tabs ._tabs-active {height:25px;border:2px solid #edd28b;border-bottom:0;}';
        div += '        ._area {margin:0;padding:0;box-sizing:border-box;width:100%;}';
        div += '        ._area-list {width:80px;height:23px;line-height:23px;float:left;margin:5px 4px;background-color:#fff;}';
        div += '        ._area-list-long {width:168px;height:23px;line-height:23px;float:left;margin:5px 4px;background-color:#fff;}';
        div += '        ._area-name {text-decoration:none;line-height:23px;padding:3px 5px;}';
        div += '        ._area-name:hover {color:#fff;background-color:#c86666;text-decoration:none;}';
        div += '        .hide {display:none;}';
        div += '    </style>';
        div += '    <div id="_tabs" style="">';
        div += '        <ul style="height:23px;">';
        div += '            <li id="_province-tab" class="_tabs-active _area-tab">请选择</li>';
        div += '            <li id="_city-tab" class="hide _area-tab">请选择</li>';
        div += '            <li id="_district-tab" class="hide _area-tab">请选择</li>';
        div += '        </ul>';
        div += '    </div>';
        div += '    <ul class="_area" id="_province"></ul>';
        div += '    <ul class="_area hide" id="_city"></ul>';
        div += '    <ul class="_area hide" id="_district"></ul>';
        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 += '<li class="_area-list-item _area-list"';
                } else {
                    html += '<li class="_area-list-item _area-list-long"';
                }
            } else {
                if(name.length < 6) {
                    html += '<li class="hide _area-list-item _area-list"';
                } else {
                    html += '<li class="hide _area-list-item _area-list-long"';
                }
            }
            html += ' areaId="' + single.ID + '"';
            html += '       parentId="' + single.PARENT_ID + '"';
            html += '       type="' + single.TYPE + '">';
            html += ' <a class="_area-name">' + data[i].NAME + '</a>';
            html += '</li>';
        }
        $("#_" + 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");
    }
}