仿百度本地惠生活jquery+js实现分站全国地区选择 非表单多级地址联动查询选择（附全国地区数据）

前言：

在网站建设中，经常需要实现全国地区分站的功能，以满足不同地区用户的需求。为了方便管理和维护这些分站，我们需要一个高效的地区选择系统。这个系统需要能够让用户方便快捷地选择所在地区，并且能够根据用户的选择进行相应的查询和展示。

本文将介绍如何使用jQuery和JavaScript实现这样的功能，读者可以通过阅读本文学习如何获取全国各地的数据，如何实现多级地址的联动查询选择，以及如何将这些功能整合到实际的应用中。（完整代码示例请通过本文下载按钮下载）

全国地区数据获取：

在获取全国地区数据时，可以从以下途径进行：（本文已经提供全国地区数据，数据为js数组，下载后可自行转换成需要的格式，如json格式）

1. 地方统计机构：通过访问地方统计机构的官方网站，可以获取到已发布的本省和所辖地级市（地区、自治州、盟）的月度、季度和年度主要指标数据。这些数据通常包括地区生产总值、工业增加值、人均收入等经济指标，以及人口、教育、医疗等社会指标。

2. 地方数据开放平台：全国各省市地区的数据集合平台，可以提供比统计局更多更杂的数据指标。这些平台通常涵盖了政府公开信息、企业数据、行业协会等多方面的数据源。

3. 行业协会：通过访问各行业协会的官方网站，可以获取到与该行业相关的数据和信息。例如，中国钢铁工业协会、中国汽车工业协会等可以提供与钢铁、汽车行业相关的数据。

4. 第三方数据发布平台：这些平台通常提供全球各国家或地区的统计数据和宏观经济指标。例如，国际组织导航和Open Data Inception可以提供全球不同国家地区的统计数据和数据库。

5. 全球数据整合平台：这些平台可以提供全球各国家或地区的统计数据和宏观经济指标。例如，知网（年鉴）、萝卜投研等可以提供全球不同国家地区的统计数据和数据库。

需要注意的是，不同的数据来源可能存在数据格式、时间范围和覆盖范围的差异。在获取数据时，需要仔细比较不同数据源的优缺点，选择最适合的数据源进行数据获取。

具体全国地区分站的功能代码的实现：

首先，先新建一个.html文件，其中因我们使用jquery实现元素操作，所以需要先导入jquery.js，本文件提供的代码使用的是jquery1.9的版本。

<script src="可在head中引入或在页面底部引入-->

在页面文件中增加下面html代码作为后面js渲染容器，当然还有css部分，由于内容过多 ，仅展示部分。

<style>
/* 为了美观设置滚动条宽度 */
.city-inner {
    scrollbar-color: #f85607 #ffffff;
    scrollbar-width: thin;
    border-radius: 5px;
}

.city-inner::-webkit-scrollbar {
    width: 5px;
}

.city-inner::-moz-scrollbar {
    width: thin;
}

.city-inner::-o-scrollbar {
    width: 5px;
}

.city-inner::-ms-scrollbar {
    width: 5px;
}

.city-inner::-webkit-scrollbar-thumb {
    background-color: #f85607;
    border-radius: 5px;
}

.city-inner::-moz-scrollbar-thumb {
    background-color: #f85607;
    border-radius: 5px;
}

.city-inner::-o-scrollbar-thumb {
    background-color: #f85607;
    border-radius: 5px;
}

.city-inner::-ms-scrollbar-thumb {
    background-color: #f85607;
    border-radius: 5px;
}
.......
</style>
<div id="container">
    <p id="area">当前地区：<span>全国</span></p>
    <div id="city">
        <article class="city-inner">
            <div class="hotCity">
                <div class="h_item h_t">热门城市</div>
            </div>

        </article>
        <div class="firstChar"></div>
    </div>
</div>

最后是是js+jquery代码部分：city.js为全国地区数据，我们提供的是js数组格式，如上图，通过本文下载后可查看详细内容。

<script src="city.js"></script>
<script>

$(document).ready(function () {
        var city = city_data();
        $.each(city["data"]["firstChar"], function (index, zm) {
            $(".firstChar").append('<div class="szm_r">' + zm + '</div>');
        });

        $.each(city["data"]["hotCity"], function (index, zm) {
            $(".hotCity").append('<div class="h_item">' + zm["city"] + '</div>');
        })
        $.each(city["data"]["allCity"], function (index, data) {
            $(".city-inner").append('<div class="c_item" id="' + index + '"><div class="szm_l">' + index + '</div><div class="city_box"></div></div>');
            $.each(data, function (index, data) {
                $("#" + data["index"] + " .city_box").append('<div class="city_sub">' + data["city"] + '</div>');
            })
        })

        // 获取右侧字母的点击事件
        $('.szm_r').on('click', function (e) {
            e.preventDefault(); // 阻止按钮默认行为
            var scrollableDiv = $(".city-inner");
            // 获取目标滚动元素
            var targetElement = $("#" + $(this).text());
            var scrollTop = targetElement.offset().top - scrollableDiv.offset().top;
            // 将目标元素滚动到顶部
            scrollableDiv.scrollTop(scrollableDiv.scrollTop() + scrollTop);
        });

        $('.city-inner').scroll(function () {
            //遍历$(".c_item")元素
            $(".c_item").each(function () {
                //获取当前元素相对于父元素右上角的位置
                var top = $(this).position().top;
                //判断当前元素是否在可视区域内
                if (top <= 12) {
                    //获取当前元素的id
                    var id = $(this).attr("id");
                    //遍历右侧字母元素
                    $(".szm_r").each(function () {
                        //获取当前字母元素的内容
                        var char = $(this).text();
                        //判断当前字母元素的内容是否等于当前元素的id
                        if (char == id) {
                            //设置当前字母元素的class = active
                            $(this).addClass("active");
                        } else {
                            //设置当前字母元素的class = ""
                            $(this).removeClass("active");
                        }
                    });
                }
            });

        });
        //鼠标经过#area显示#city
        $("#area").mouseenter(function () {
            $("#city").fadeIn();
        });

        $("#city").mouseenter(function () {
            $("#city").fadeIn();
        });

        $("#city").mouseleave(function () {
            $("#city").fadeOut();
        });

    });
</script>

下面展示几长js实现全国地区分站的功能展示的效果图：