1. Python技术站首页
  2. jquery

js实现简单省市区三级选择联级

• jquery

下面是“js实现简单省市区三级选择联级”的完整攻略：

准备工作

  1. 首先，需要准备三个下拉框，用于选择省、市、区/县三级。
  2. 接着，需要准备好省市区/县的数据，可以从网络上搜集或是自己整理。常见的格式包括json, xml等。

HTML页面布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div>
        <label>省：</label>
        <select id="province">
            <option value="">请选择</option>
        </select>
    </div>
    <div>
        <label>市：</label>
        <select id="city">
            <option value="">请选择</option>
        </select>
    </div>
    <div>
        <label>区/县：</label>
        <select id="area">
            <option value="">请选择</option>
        </select>
    </div>
    <script src="script.js"></script>
</body>
</html>

JS实现

  1. 使用 jQuery 的 ajax 方法异步获取省市区数据。示例代码如下：
// 异步获取省份信息
$.get('province.json', function(data) {
    // 在console中打印一下数据，方便调试
    console.log(data);
});

注：此处后端返回的数据格式是json，要注意与实际情况匹配。

  1. 解析省市区数据，并动态生成省、市、区/县列表。示例代码如下：
$.get('province.json', function(data) {
    // 解析省急市区数据，然后动态添加到select控件中
    var province = $('#province');
    $.each(data, function(index, item) {
        var option = $('<option>').val(item.code).text(item.name);
        province.append(option);
    });

    // 为省添加change事件，选择不同的省时，加载相应的市信息
    province.change(function() {
        city.empty(); // 清空城市列表
        area.empty(); // 清空区/县列表

        var code = $(this).val();
        if (!code) return; // 如果没有选择省份，则直接返回

        // 异步获取城市信息
        $.get('city.json', {province: code}, function(data) {
            console.log(data);
            $.each(data, function(index, item) {
                var option = $('<option>').val(item.code).text(item.name);
                city.append(option);
            });
        });
    });
});

注：此处后端提供了根据省份code获取对应城市级别列表的接口地址，返回json数据格式，要注意与实际情况匹配。

  1. 当用户选择不同的城市时，根据城市的code加载对应的区/县列表。示例代码如下：
$.get('city.json', {province: code}, function(data) {
    console.log(data);
    $.each(data, function(index, item) {
        var option = $('<option>').val(item.code).text(item.name);
        city.append(option);
    });

    city.change(function() {
        area.empty(); // 清空区县列表

        var code = $(this).val();
        if (!code) return; // 如果没有选择城市，则直接返回

        // 异步获取区/县信息
        $.get('area.json', {city: code}, function(data) {
            console.log(data);
            $.each(data, function(index, item) {
                var option = $('<option>').val(item.code).text(item.name);
                area.append(option);
            });
        });
    });
});

注：此处后端提供了根据城市code获取对应区/县列表的接口地址，返回json数据格式，要注意与实际情况匹配。

完整示例

以下是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div>
        <label>省：</label>
        <select id="province">
            <option value="">请选择</option>
        </select>
    </div>
    <div>
        <label>市：</label>
        <select id="city">
            <option value="">请选择</option>
        </select>
    </div>
    <div>
        <label>区/县：</label>
        <select id="area">
            <option value="">请选择</option>
        </select>
    </div>
    <script>
        $(function() {
            var province = $('#province');
            var city = $('#city');
            var area = $('#area');

            // 异步获取省份信息
            $.get('province.json', function(data) {
                // 在console中打印一下数据，方便调试
                console.log(data);

                // 解析省急市区数据，然后动态添加到select控件中
                $.each(data, function(index, item) {
                    var option = $('<option>').val(item.code).text(item.name);
                    province.append(option);
                });
            });

            province.change(function() {
                city.empty(); // 清空城市列表
                area.empty(); // 清空区县列表

                var code = $(this).val();
                if (!code) return; // 如果没有选择省份，则直接返回

                // 异步获取城市信息
                $.get('city.json', {province: code}, function(data) {
                    console.log(data);
                    $.each(data, function(index, item) {
                        var option = $('<option>').val(item.code).text(item.name);
                        city.append(option);
                    });
                });
            });

            city.change(function() {
                area.empty(); // 清空区县列表

                var code = $(this).val();
                if (!code) return; // 如果没有选择城市，则直接返回

                // 异步获取区县信息
                $.get('area.json', {city: code}, function(data) {
                    console.log(data);
                    $.each(data, function(index, item) {
                        var option = $('<option>').val(item.code).text(item.name);
                        area.append(option);
                    });
                });
            });
        });
    </script>
</body>
</html>

同时，我们也可以使用mockjs快捷生成演示数据。例如下面示例提供的演示时省市区的js数据：

// mockjs数据：省份列表
Mock.mock('province.json', 'get', function() {
    return [
        {"name": "北京市", "code": "110000"},
      {"name": "天津市", "code": "120000"},
      {"name": "河北省", "code": "130000"},
      {"name": "山西省", "code": "140000"},
      {"name": "内蒙古自治区", "code": "150000"},
      {"name": "辽宁省", "code": "210000"},
      {"name": "吉林省", "code": "220000"},
      {"name": "黑龙江省", "code": "230000"},
      {"name": "上海市", "code": "310000"},
      {"name": "江苏省", "code": "320000"},
      {"name": "浙江省", "code": "330000"},
      {"name": "安徽省", "code": "340000"},
      {"name": "福建省", "code": "350000"},
      {"name": "江西省", "code": "360000"},
      {"name": "山东省", "code": "370000"},
      {"name": "河南省", "code": "410000"},
      {"name": "湖北省", "code": "420000"},
      {"name": "湖南省", "code": "430000"},
      {"name": "广东省", "code": "440000"},
      {"name": "广西壮族自治区", "code": "450000"},
      {"name": "海南省", "code": "460000"},
      {"name": "重庆市", "code": "500000"},
      {"name": "四川省", "code": "510000"},
      {"name": "贵州省", "code": "520000"},
      {"name": "云南省", "code": "530000"},
      {"name": "西藏自治区", "code": "540000"},
      {"name": "陕西省", "code": "610000"},
      {"name": "甘肃省", "code": "620000"},
      {"name": "青海省", "code": "630000"},
      {"name": "宁夏回族自治区", "code": "640000"},
      {"name": "新疆维吾尔自治区", "code": "650000"},           
    ];
});

// mockjs数据：城市列表
Mock.mock('city.json', 'get', function(options) {
    var province = options.body.match(/province=(\d+)/i);
    var code = province[1];
    var data = [];

    if (code === '130000') {
        data = [
            {"name": "石家庄市", "code": "130100"},
            {"name": "唐山市", "code": "130200"},
            {"name": "秦皇岛市", "code": "130300"},
            {"name": "邯郸市", "code": "130400"},
            {"name": "邢台市", "code": "130500"},
            {"name": "保定市", "code": "130600"},
            {"name": "张家口市", "code": "130700"},
            {"name": "承德市", "code": "130800"},
            {"name": "沧州市", "code": "130900"},
            {"name": "廊坊市", "code": "131000"},
            {"name": "衡水市", "code": "131100"}
        ];
    } else if (code === '320000') {
        data = [
            {"name": "南京市", "code": "320100"},
            {"name": "无锡市", "code": "320200"},
            {"name": "徐州市", "code": "320300"},
            {"name": "常州市", "code": "320400"},
            {"name": "苏州市", "code": "320500"},
            {"name": "南通市", "code": "320600"},
            {"name": "连云港市", "code": "320700"},
            {"name": "淮安市", "code": "320800"},
            {"name": "盐城市", "code": "320900"},
            {"name": "扬州市", "code": "321000"},
            {"name": "镇江市", "code": "321100"},
            {"name": "泰州市", "code": "321200"},
            {"name": "宿迁市", "code": "321300"}
        ];
    } else if (code === '440000') {
        data = [
            {"name": "广州市", "code": "440100"},
            {"name": "韶关市", "code": "440200"},
            {"name": "深圳市", "code": "440300"},
            {"name": "珠海市", "code": "440400"},
            {"name": "汕头市", "code": "440500"},
            {"name": "佛山市", "code": "440600"},
            {"name": "江门市", "code": "440700"},
            {"name": "湛江市", "code": "440800"},
            {"name": "茂名市", "code": "440900"},
            {"name": "肇庆市", "code": "441200"},
            {"name": "惠州市", "code": "441300"},
            {"name": "梅州市", "code": "441400"},
            {"name": "汕尾市", "code": "441500"},
            {"name": "河源市", "code": "441600"},
            {"name": "阳江市", "code": "441700"},
            {"name": "清远市", "code": "441800"},
            {"name": "东莞市", "code": "441900"},
            {"name": "中山市", "code": "442000"},
            {"name": "潮州市", "code": "445100"},
            {"name": "揭阳市", "code": "445200"},
            {"name": "云浮市", "code": "445300"}
        ];
    }

    return data;
});

// mockjs数据：区县列表
Mock.mock('area.json', 'get', function(options) {
    var city = options.body.match(/city=(\d+)/i);
    var code = city[1];
    var data = [];

    if (code === '130100') {
        data = [
            {"name": "长安区", "code": "130102"},
            {"name": "桥西区", "code": "130104"},
            {"name": "新华区", "code": "130105"},
            {"name": "井陉矿区", "code": "130107"},
            {"name": "辛集市", "code": "130181"}
        ];
    } else if (code === '320100') {
        data = [
            {"name": "玄武区", "code": "320102"},
            {"name": "白下区", "code": "320103"},
            {"name": "秦淮区", "code": "320104"},
            {"name": "鼓楼区", "code": "320105"},
            {"name": "浦口区", "code": "320111"},
            {"name": "栖霞区", "code": "320113"},
            {"name": "江宁区", "code": "320115"},
            {"name": "雨花台区", "code": "320114"},
            {"name": "溧水区", "code": "320117"}
        ];
    } else if (code === '440100') {
        data = [
            {"name": "荔湾区", "code": "440103"},
            {"name": "越秀区", "code": "440104"},
            {"name": "海珠区", "code": "440105"},
            {"name": "天河区", "code": "440106"}
        ];
    }

    return data;
});

以上就是实现省市区三级联动的详细攻略，如果有不清楚的地方欢迎提问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现简单省市区三级选择联级 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • jQWidgets jqxResponsivePanel高度属性

    jQWidgets库是一款效果出色、支持多平台的JavaScript UI框架。其中的jqxResponsivePanel控件提供了响应式布局的功能，可以使网站在不同设备和屏幕尺寸下的显示和布局更加智能化。其中，jqxResponsivePanel高度属性是控制响应式面板的高度的属性。下面，我们将从以下几个方面来详细讲解高度属性的使用方法： jqxRespo…

    jquery 2023年5月11日
    00

  • js、jquery实现列表模糊搜索功能过程解析

    下面详细讲解一下如何使用 JavaScript 和 jQuery 实现列表模糊搜索功能。 1. 列表模糊搜索功能介绍 在实际开发中，经常有一些需要搜索或过滤数据的场景，如搜索商品、筛选文章等场景。列表模糊搜索功能就是针对这种场景，通过用户输入的关键字在列表中匹配，然后展示匹配的数据。 2. 实现列表模糊搜索功能的过程 2.1 创建表格和搜索框 首先，在 HT…

    jquery 2023年5月28日
    00

  • jQWidgets jqxPanel remove()方法

    以下是关于 jQWidgets jqxPanel 组件中 remove() 方法的详细攻略。 jQWidgets jqxPanel remove() 方法 jQWidgets jqxPanel 组件的 remove() 方法用于从 DOM 中删除面板。 语法 $(‘#panel’).jqxPanel(‘remove’); 示例 以下两个示例演示如何使用 re…

    jquery 2023年5月12日
    00

  • jQuery垂直圆点导航插件

    首先我们需要了解什么是垂直圆点导航，它是一种常见的网站导航方式，通常位于网站的侧边栏上，可以让用户快速地浏览整个网站的目录结构。 jQuery垂直圆点导航插件可以帮助我们快速实现这种导航方式，下面是使用这个插件的完整攻略： 步骤一：引入jQuery库和插件文件 首先需要在网页中引入jQuery库和jQuery垂直圆点导航插件文件。可以通过以下代码实现： &l…

    jquery 2023年5月13日
    00

  • 为什么在jQuery中出现$ is not defined的错误

    如果在使用 jQuery 的过程中出现 $ is not defined 的错误提示，这通常是因为网页中没有正确加载 jQuery 库导致的。 以下是解决该错误的完整攻略： 确定 jQuery 库是否被正确加载 首先，要确保在 HTML 页面中正确地链接了 jQuery 库。常见的链接方式是在 <head> 标签中的 <script>…

    jquery 2023年5月12日
    00

  • 如何使用jQuery Mobile创建一个禁用的滑块

    当我们需要让用户选择一个数值范围时，jQuery Mobile中的滑块（Slider）控件是一个不错的选择。然而，在某些情况下，我们需要禁用控件，例如当特定条件未满足时禁止用户滑动。 下面是如何使用jQuery Mobile创建一个禁用的滑块的步骤： 步骤1：引入jQuery Mobile 在使用jQuery Mobile之前，我们需要将其引入页面中。可以通…

    jquery 2023年5月12日
    00

  • jQWidgets jqxTree animationShowDuration属性

    以下是关于 jQWidgets jqxTree animationShowDuration 属性的完整攻略： jQWidgets jqxTree animationShowDuration 属性 animationShowDuration 属性用于设置树形构中节点展开的动画持续时间。该属性设置为一个数字时，节点展开时会有一个动画效果，持续时间为设置数字值。 …

    jquery 2023年5月11日
    00

  • jQuery实现的简单手风琴效果示例

    下面是“jQuery实现的简单手风琴效果示例”的完整攻略。 介绍 手风琴效果是一种常见的Web页面设计特效，使用jQuery可以轻松实现该效果。本篇攻略将提供基于jQuery的手风琴效果实现方法和示例，帮助大家掌握该效果的制作方法。 实现方法 手风琴效果实现的核心是控制元素的动画效果，具体步骤如下： 首先，需要通过CSS设置手风琴各个元素的样式，包括容器的样…

    jquery 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部