特效介绍
省市三级联动js插件
使用方法
1、在您的css文件引入下面的css代码：
*{ margin:0; padding:0; }
.ui-input { padding: 6px 5px; width: 100px; height: 16px; line-height: 16px; border: 1px solid #d7d7d7; color: #555; vertical-align: middle; outline: none; }
.ui-input-ph { color: #999;font-family:微软雅黑; }
.ui-input:hover { border: 1px solid #ed7220; }
.ui-input:focus, .ui-input-focus { border: 1px solid #ed7220; }
.ui-input-dis{ background: #f0f0f0; color: #999; }
.ui-input-dis:hover{border-color:#ddd;box-shadow:none;}
.dizhi { width:100%; /*height:123px;*/ float:left; margin:10px 0;}
.dizhi .dizhi_s { width:503px; /*height:123px;*/ border:1px solid #ddd; background:#fffbff; float:left;}
.dizhi .dizhi_s .dizhi_s_1 { padding:10px 0px 0px; height:30px;}
.dizhi .dizhi_s .dizhi_s_1 .dizhi_s_1_1 { width:203px; /*height:30px;*/ float:left;}
.dizhi .dizhi_s .dizhi_s_1 .dizhi_s_1_1 b { width:80px; text-align:right; float:left; line-height:28px;}
.dizhi .dizhi_s .dizhi_s_1 .dizhi_s_1_1 .ui-search { float:left; width:155px;}
.dizhi .dizhi_s .dizhi_s_2 { padding:5px 10px 5px; height:30px;}
.dizhi .dizhi_s .dizhi_s_2 .dizhi_s_2_1 { /*height:30px;*/ float:left;}
.dizhi .dizhi_s .dizhi_s_2 .dizhi_s_2_1 b { width:70px; text-align:right; float:left; line-height:28px;}
.dizhi .dizhi_s .dizhi_s_2 .dizhi_s_2_1 .ui-search { float:left; width:155px;}
.dizhi .dizhi_s .dizhi_s_2 .dizhi_s_2_1 .dizhi_city { cursor:pointer; color:#999 ; text-align:left;}
.dizhi_city{ cursor:pointer; color:#999 !important; text-align:left;}
.dizhi .dizhi_s .dizhi_s_2 .dizhi_s_2_1 .dizhi_city:hover { border:1px solid #D7D7D7;}
.dizhi_t {left:0; width:286px; height:-234px; background:#fff; border:1px solid #ed7220;position:absolute;z-index:1000;display:none;font-size: 12px;line-height: 19px;color:rgb(102, 102, 102);}
.dizhi_t .dizhi_t_1{ width:286px; height:22px; background:#ff8b3d; float:left;}
.dizhi_t .dizhi_t_1 p { cursor:pointer;width:70px; height:22px; float:left; font-weight:bold; color:#FFF; text-align:center;}
.dizhi_t .dizhi_t_1 .hover { cursor:pointer;background:#FFF; color:#ff8b3d;width:68px;}
.dizhi_t .dizhi_t_2 { width:286px; height:auto; float:left;}
.dizhi_t .dizhi_t_2 .dizhi_t_2_1 { width:38px; height:30px; float:left; text-align:center;color:#ff8b3d; cursor:pointer; line-height:30px}
.dizhi_t .dizhi_t_2 .dizhi_t_2_2 { width:248px; height:auto; float:left;}
.dizhi_t .dizhi_t_2 .dizhi_t_2_2 p{white-space:nowrap; width:40px; height:30px;float:left; cursor:pointer;line-height:30px; text-align:center;margin-bottom: 0px;}
.dizhi_t .dizhi_t_2 .dizhi_t_2_2 p:hover { color: #ff8b3d;background:#fbfbfb;}
2、在head引入相关js：
<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script src="js/area.js" type="text/javascript"></script>3、在需要使用本省市县三级联动插件的地方加入下面的代码：
<div class="manage-wrapper"> <input value="请选择城市" type="text" class="ui-input dizhi_city" id="city" autocomplete="off" readonly="" style="width:180px;"> </div>4、在</body>前面加入下面的代码：
<script>
function AdrInputPopDiv(){
this.init=function(inpuId, isAbsolute) {
var dizhiDiv = null;
var initInput = null;
if (isAbsolute){
$(".manage-wrapper").append($(provinceObjectDiv).html());
var dizhiDiv = $(".manage-wrapper").children(".dizhi_t");
dizhiDiv.css('margin-left','70px');
$(".manage-wrapper").on("click", ".dizhi_city", function(e){
var curThis = $(this);
var top = curThis.offset().top + curThis.outerHeight();
var left = curThis.offset().left - curThis.outerWidth() / 2 + 24;
dizhiDiv.css({top:top, left:left});
if (initInput && curThis.offset().top != initInput.offset().top && dizhiDiv.is(":visible")){
dizhiDiv.hide();
}
dizhiDiv.toggle();//.css("display", "block");
initInput = $(this);
});
}else{
initInput = $("#" + inpuId);
//$(".dizhi_t").appendTo(initInput.parent());
//initInput.parent().append($(".dizhi_t").parent().html());
//display: inline-block;
var _wrap = $('<span style="position:relative;padding:0;z-index:995"></span>');
initInput.wrap(_wrap);
initInput.parent().append($(provinceObjectDiv).html()).closest('div').css('overflow','visible');
dizhiDiv = initInput.parent().children(".dizhi_t");
initInput.click(function(e){
var dizhiClsDiv = initInput.closest(".dizhi");
if (dizhiClsDiv.length > 0){
var dizhiPar = $("#consignee", dizhiClsDiv).parent();
if (dizhiPar.hasClass("errorWrap")){
dizhiPar.css("z-index", 996);
}
dizhiPar = $("#consignAdr", dizhiClsDiv).parent();
if (dizhiPar.hasClass("errorWrap")){
dizhiPar.css("z-index", 994);
}
dizhiPar = $("#consignPhone", dizhiClsDiv).parent();
if (dizhiPar.hasClass("errorWrap")){
dizhiPar.css("z-index", 993);
}
//dizhiPar = $("#initConsignAdrCity", dizhiClsDiv).parent();
//dizhiPar.css("z-index", 995).css("display", "");
}
dizhiDiv.toggle();//.css("display", "block");
});
}
dizhiDiv.on('click', '.dizhi_t_1 p', function(e){
var idx = $(this).attr("idx");
$(this).parent().find("p").removeClass("hover");
dizhiDiv.find(".province").css("display", "none");
dizhiDiv.find(".city").css("display", "none");
dizhiDiv.find(".area").css("display", "none");
if (idx == 1){
$(this).addClass("hover");
dizhiDiv.find(".province").css("display", "block");
}else if(idx == 2){
$(this).addClass("hover");
dizhiDiv.find(".city").css("display", "block");
}else if(idx == 3){
$(this).addClass("hover");
dizhiDiv.find(".area").css("display", "block");
}else if(idx == 4){
$(this).addClass("hover");
initInput.val("请选择城市");
initInput.attr("请选择城市");
initInput.trigger("click");
dizhiDiv.find('.dizhi_t_1 p[idx=1]').trigger("click");
}
});
var selPro = "";
var selCity = "";
var proFullName = {"北京":"北京", "天津":"天津", "内蒙古":"内蒙古自治区", "上海":"上海"
, "广西":"广西壮族自治区", "重庆":"重庆", "西藏":"西藏自治区", "宁夏":"宁夏回族自治区"
, "新疆":"新疆维吾尔自治区", "香港":"香港特别行政区", "澳门":"澳门特别行政区"};
dizhiDiv.on('click', '.province .dizhi_t_2_2 p', function(e){
var pro = $(this).text();
if (proFullName[pro]){
pro = proFullName[pro];
}else{
pro += "省";
}
selPro = pro;
var city = "";
$.each(provinceObject[pro], function(v){
city += "<p style='width:auto;padding-right: 6px;'>" + v + "</p>";
});
var cityDiv = dizhiDiv.find(".city .dizhi_t_2 .dizhi_t_2_2");
cityDiv.html("");
$(city).appendTo(cityDiv);
dizhiDiv.find('.dizhi_t_1 p[idx=2]').trigger("click");
initInput.val(selPro + "-");
initInput.attr("title", initInput.val());
});
dizhiDiv.on('click', '.city .dizhi_t_2_2 p', function(e){
var city = $(this).text();
selCity = city;
var area = "";
$.each(provinceObject[selPro][city], function(idx, v){
area += "<p style='width:auto;padding-right: 6px;'>" + v + "</p>";
});
var areaDiv = dizhiDiv.find(".area .dizhi_t_2 .dizhi_t_2_2");
areaDiv.html("");
$(area).appendTo(areaDiv);
dizhiDiv.find('.dizhi_t_1 p[idx=3]').trigger("click");
initInput.val(selPro + "-" + selCity + "-");
initInput.attr("title", initInput.val());
});
dizhiDiv.on('click', '.area .dizhi_t_2_2 p', function(e){
var area = $(this).text();
initInput.val(selPro + "-" + selCity + "-" + area);
initInput.attr("title", initInput.val());
initInput.trigger("click");
});
$(document).on('click',function(e){
var target = e.target || e.srcElement;
if (target.id == inpuId){
e.preventDefault();
return;
}
$('.dizhi_t').each(function(){
if($(target).closest(this).length == 0
&& $(this).parent().find("input[id='" + inpuId + "']").attr("id") == inpuId
&& $(this).is(':visible')){
$(this).hide();
}
});
});
$(".wrapper").off("keypress", ".dizhi_city_detail").on('keypress', ".dizhi_city_detail" , function(e){
var allowedReg = new RegExp('[,]');
var charCode = typeof e.charCode != 'undefined' ? e.charCode : e.keyCode;
var keyChar = String.fromCharCode(charCode);
if(allowedReg.test(keyChar)){
e.preventDefault();
return;
};
}).off("blur", ".dizhi_city_detail").on('blur', ".dizhi_city_detail", function(){
var val = $(this).val();
if (val.indexOf(",") != -1){
$(this).val(val.replace(/,/g, ''));
}
});
};
};
new AdrInputPopDiv().init("",true);
</script>