地区切换类似京东网站

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>