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

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