省市县下拉列表框源代码及源数据下载地址

最新推荐文章于 2023-09-25 11:10:58 发布

专职

最新推荐文章于 2023-09-25 11:10:58 发布

阅读量686

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/weixin_42289273/article/details/107748718

版权

Django 专栏收录该内容

105 篇文章 15 订阅

订阅专栏

一：areas.sql下载地址：

链接：https://pan.baidu.com/s/1B7SgxNygzC0kBtIQz32d7A 
提取码：qwer

二：html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    <meta charset="UTF-8">
    <title>省市县选择案例</title>
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
        $(document).ready(function () {

            // 发起ajax请求,获取所有省份信息
            $.get("/prov/", function (data) {
                // 回调函数, 获取返回的json数据
                res = data.areas;
                // 遍历res数组,获取每一个元素[id, atitle]
                // 循环简写, index是下标,item是每一个元素
                $.each(res, function (index, item) {
                    id = item[0];
                    atitle = item[1];
                    // 新建option
                    option = "<option value='" + id + "'>" + atitle +  "</option>";
                    // 向prov下拉列表框中追加元素
                    $("#prov").append(option);
                })
            });


            // 绑定prov下拉列表框的change事件
            $("#prov").change(function () {
                // 先清空市下拉列表框
                $("#city option").eq(0).siblings().remove();
                // 在清空县下拉列表框
                $("#dis option").eq(0).siblings().remove();
                prov_id = $(this).val();
                // 发送ajax请求,获取省下面的所有市的信息
                $.get("/city/", {"prov_id":prov_id}, function (data) {
                    res = data.areas;
                    // 遍历
                    $.each(res, function (index, item) {
                        id = item[0];
                        atitle = item[1];
                        // 拼接option字符串
                        option_str = "<option value='" + id + "'>" + atitle + "</option>";
                        // 向市下拉列表框中追加option_str
                        $("#city").append(option_str);
                    })
                })

            });


            // 绑定city下拉列表框的change事件
            $("#city").change(function () {
                // 先清空县下拉列表框
                $("#dis option").eq(0).siblings().remove();
                city_id = $(this).val();
                // 发送ajax请求,获取省下面的所有市的信息
                $.get("/dis/", {"city_id":city_id}, function (data) {
                    res = data.areas;
                    // 遍历
                    $.each(res, function (index, item) {
                        id = item[0];
                        atitle = item[1];
                        // 拼接option字符串
                        option_str = "<option value='" + id + "'>" + atitle + "</option>";
                        // 向市下拉列表框中追加option_str
                        $("#dis").append(option_str);
                    })
                })

            });


        })
    </script>
</head>
<body>
<select name="" id="prov">
    <option value="">---请选择省---</option>
</select>
<select name="" id="city">
    <option value="">---请选择市---</option>
</select>
<select name="" id="dis">
    <option value="">---请选择县---</option>
</select>
</body>
</html>

三：views.py文件

def areas(request):
    """省市县选择案例"""
    return render(request, "booktest/areas.html")


def prov(request):
    """获取所有省份地区的信息"""
    # 获取所有省份
    areas = AreaInfo.objects.filter(aParent__isnull=True)
    # 遍历all_prov,并拼接出json数据atitle id
    areas_list = []
    for area in areas:
        areas_list.append((area.id, area.atitle))

    # 返回json类型的数据
    return JsonResponse({"areas": areas_list})


def city(request):
    """获取省份对应的所有市"""
    prov_id = request.GET.get("prov_id")
    # 获取省份id对应的市
    citys = AreaInfo.objects.filter(aParent=prov_id)

    areas_list = []
    for city in citys:
        areas_list.append((city.id, city.atitle))

    return JsonResponse({"areas": areas_list})


def dis(request):
    """获取省份对应的所有市"""
    city_id = request.GET.get("city_id")
    # 获取省份id对应的市
    diss = AreaInfo.objects.filter(aParent=city_id)

    areas_list = []
    for dis in diss:
        areas_list.append((dis.id, dis.atitle))

    return JsonResponse({"areas": areas_list})

四：urls.py文件

url(r"^areas/$", views.areas),  # 省市县选择案例
    url(r"^prov/$", views.prov),  # 获取省
    url(r"^city/$", views.city),  # 获取市
    url(r"^dis/$", views.dis),  # 获取市

专职

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
省市县下拉列表框源代码及源数据下载地址

一：areas.sql下载地址：链接：https://pan.baidu.com/s/1B7SgxNygzC0kBtIQz32d7A提取码：qwer二：html文件：<!DOCTYPE html><html lang="en"><head> {% load staticfiles %} <meta charset="UTF-8"> <title>省市县选择案例</title> &l.
复制链接

扫一扫