首页 > Web开发 > 详细

地区切换类似京东网站

时间：2014-11-13 14:42:01 阅读：222 评论：0 收藏：0 [点我收藏+]

标签：style io ar os sp java for strong div

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>

地区切换类似京东网站

标签：style io ar os sp java for strong div

原文地址：http://blog.csdn.net/luohuajiexiejuan/article/details/41078513

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！