首页 > 代码库 > 地区切换类似京东网站

地区切换类似京东网站

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 = http://www.mamicode.com/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=http://www.mamicode.com/"@address.ProvinceId">
                            <input type="hidden" id="currentCityId" name="currentCityId" value=http://www.mamicode.com/"@address.CityId">
                            <div onclick="$(‘#store-selector‘).removeClass(‘hover‘)" class="close"></div>
                        </div>
                        <div id="store-prompt"><strong></strong></div>
                    </div>
                </li>
            </ul>




地区切换类似京东网站