var areaTabContainer = $("#JD-stock .tab li");
var provinceContainer = $("#stock_province_item");
var cityContainer = $("#stock_city_item");
var currentProvinceId;
var isFirst = 0;
//当前地域信息
var currentAreaInfo;
$(function () {
GetCityByMemberId();
$("#store-selector").unbind("mouseover").bind("mouseover", function () {
$(‘#store-selector‘).addClass(‘hover‘);
$("#store-selector .content").show();
});
$("#store-selector").unbind("mouseout").bind("mouseout", function () {
$(‘#store-selector‘).removeClass(‘hover‘)
});
areaTabContainer.eq(0).find("a").click(function () {
GetProvince();
areaTabContainer.removeClass("curr");
areaTabContainer.eq(0).addClass("curr").show();
provinceContainer.show();
cityContainer.hide();
});
areaTabContainer.eq(1).find("a").click(function () {
areaTabContainer.removeClass("curr");
areaTabContainer.eq(1).addClass("curr").show();
provinceContainer.hide();
cityContainer.show();
});
});
function GetCityByMemberId() {
var temp = Math.random();
//$.post("/Member/GetCityByMemberId?temp=" + temp, function (data) {
// //$("#loginName").text(data.UserName);
// var address = data.CityName;
// $("#store-selector .text div").html(address).attr("title", address);
// areaTabContainer.eq(0).find("em").html(data.ProvinceName);
// areaTabContainer.eq(1).find("em").html(data.CityName);
// $("#currentCityId").val(data.CityId);
// $("#currentProvinceId").val(data.ProvinceId);
// currentProvinceId = data.ProvinceId;
GetCityByProvinceId($("#currentProvinceId").val(), areaTabContainer.eq(0).find("em").html());
//});
}
function GetProvince() {
var temp = Math.random();
$.post("/Member/GetProvince?temp=" + temp, function (data) {
var html = ["<ul class=‘area-list‘>"];
var longhtml = [];
var longerhtml = [];
for (var i = 0, j = data.length; i < j ; i++) {
if (data[i].ProvinceName != null) {
if (data[i].ProvinceName.length > 12) {
longerhtml.push("<li class=‘longer-area‘><a href=‘javascript:void(0)‘ data-value=‘" + data[i].ProvinceID + "‘>" + data[i].ProvinceName + "</a></li>");
}
else if (data[i].ProvinceName.length > 5) {
longhtml.push("<li class=‘long-area‘><a href=‘javascript:void(0)‘ data-value=‘" + data[i].ProvinceID + "‘>" + data[i].ProvinceName + "</a></li>");
}
else {
html.push("<li><a href=‘javascript:void(0)‘ data-value=‘" + data[i].ProvinceID + "‘>" + data[i].ProvinceName + "</a></li>");
}
}
}
html.push(longhtml.join(""));
html.push(longerhtml.join(""));
html.push("</ul>");
provinceContainer.html(html.join(""));
provinceContainer.find("a").click(function () {
$("#store-selector").unbind("mouseout");
chooseProvince($(this).attr("data-value"), $(this).html());
});
});
}
function GetCityByProvinceId(provinceId, provinceName) {
var temp = Math.random();
$.post("/Member/GetCity", "provinceId=" + provinceId + "&temp=" + temp, function (data) {
var html = ["<ul class=‘area-list‘>"];
var longhtml = [];
var longerhtml = [];
for (var i = 0, j = data.length; i < j ; i++) {
if (data[i].CityName != null) {
if (data[i].CityName.length > 12) {
longerhtml.push("<li class=‘longer-area‘><a href=‘javascript:void(0)‘ data-value=‘" + data[i].CityID + "‘>" + data[i].CityName + "</a></li>");
}
else if (data[i].CityName.length > 5) {
longhtml.push("<li class=‘long-area‘><a href=‘javascript:void(0)‘ data-value=‘" + data[i].CityID + "‘>" + data[i].CityName + "</a></li>");
}
else {
html.push("<li><a href=‘javascript:void(0)‘ data-value=‘" + data[i].CityID + "‘>" + data[i].CityName + "</a></li>");
}
}
}
html.push(longhtml.join(""));
html.push(longerhtml.join(""));
html.push("</ul>");
cityContainer.html(html.join(""));
cityContainer.find("a").click(function (e) {
$("#store-selector").unbind("mouseout");
chooseCity($(this).attr("data-value"), $(this).html(), provinceId, provinceName);
});
});
}
function chooseProvince(provinceId, provinceName) {
$("#currentProvinceId").val(provinceId);
provinceContainer.hide();
areaTabContainer.eq(0).removeClass("curr").find("em").html(provinceName);
areaTabContainer.eq(1).addClass("curr").show().find("em").html("请选择");
cityContainer.show();
cityContainer.html("");
GetCityByProvinceId(provinceId, provinceName);
}
function chooseCity(cityId, cityName, provinceId, provinceName) {
areaTabContainer.eq(1).find("em").html(cityName);
$("#store-selector .text div").html(cityName).attr("title", cityName);
$("#currentCityId").val(cityId);
$(‘#store-selector‘).removeClass(‘hover‘);
$.post("/Member/AddAddressSession", {
ProvinceId: provinceId,
ProvinceName: provinceName,
CityId: cityId,
CityName: cityName
}, function (data) {
window.location.href = window.location.href;
});
}
var address = @Html.GetAddress(account.Id);
<ul id="list1" style="width:620px;margin:6px auto 0 auto;">
<li id="summary-stock">
<div class="dd">
<div id="store-selector">
<div class="text"><div title="@address.CityName">@address.CityName</div><b></b></div>
<div class="content">
<div data-widget="tabs" class="m JD-stock" id="JD-stock">
<div class="mt">
<ul class="tab">
<li data-index="0" data-widget="tab-item">
<a href="javascript:void(0)" class="hover"><em>@address.ProvinceName</em><i></i></a>
</li>
<li data-index="1" data-widget="tab-item" class="curr">
<a href="javascript:void(0)" class=""><em>@address.CityName</em><i></i></a>
</li>
</ul>
<div class="stock-line">
</div>
</div>
<div class="mc" data-area="0" data-widget="tab-content" id="stock_province_item" style="display:none">
</div>
<div class="mc" data-area="1" data-widget="tab-content" id="stock_city_item">
</div>
</div>
</div><input type="hidden" id="currentProvinceId" name="currentProvinceId" value="@address.ProvinceId">
<input type="hidden" id="currentCityId" name="currentCityId" value="@address.CityId">
<div onclick="$(‘#store-selector‘).removeClass(‘hover‘)" class="close"></div>
</div>
<div id="store-prompt"><strong></strong></div>
</div>
</li>
</ul>
地区切换类似京东网站
原文：http://blog.csdn.net/luohuajiexiejuan/article/details/41078513
