省市区三级联动以及无限分类

最新推荐文章于 2025-03-12 13:11:31 发布

_不是惊风

最新推荐文章于 2025-03-12 13:11:31 发布

阅读量2.5k

点赞数

分类专栏：前端 github 文章标签：三级联动无限分类 JavaScript 数据结构递归

本文链接：https://blog.csdn.net/weixin_43240445/article/details/120992934

版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

github

1 篇文章

订阅专栏

本文介绍了如何使用嵌套数据结构实现省市区三级联动，并通过JavaScript递归算法展示了无限分类的实现，提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

省市区三级联动以及无限分类

一、省市区三级联动

省市区三级联动推荐使用

https://github.com/uiwjs/province-city-china

三级联动数据结构

[
  {
    "code": "420000",
    "name": "湖北省",
    "province": "42",
    "children": [
      {
        "code": "420100",
        "name": "武汉市",
        "province": "42",
        "city": "01",
        "children": [
          {
            "code": "420102",
            "name": "江岸区",
            "province": "42",
            "city": "01",
            "area": "02"
          },
          // ...
        ]
      }
      // ...
    ]
  }
  // ...
]

数据结构属于嵌套结构，所以归属关系十分的清晰

二、无限分类的实现原理及算法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>利用递归处理无限分类</title>
  </head>
  <body>
    <script>
      const treeData = [
        { id: 1, name: "湖北省", parentId: null },

        { id: 2, name: "武汉市", parentId: 1 },
        { id: 3, name: "江岸区", parentId: 2 },
        { id: 4, name: "江汉区", parentId: 2 },
        { id: 5, name: "硚口区", parentId: 2 },

        { id: 6, name: "黄石市", parentId: 1 },
        { id: 7, name: "黄石港区", parentId: 6 },
        { id: 8, name: "西塞山区", parentId: 6 },

        { id: 9, name: "山西省", parentId: null },
        { id: 10, name: "太原市", parentId: 9 },
        { id: 11, name: "小店区", parentId: 10 },
        { id: 12, name: "迎泽区", parentId: 10 },

        { id: 13, name: "大同市", parentId: 9 },
        { id: 14, name: "新荣区", parentId: 13 },
        { id: 15, name: "平城区", parentId: 13 },
        { id: 16, name: "云冈区", parentId: 13 },
      ];

      function reverseTree(data, pid) {
        var result = [],
          temp;
        for (var i in data) {
          if (data[i].parentId === pid) {
            result.push(data[i]);
              
            temp = reverseTree(data, data[i].id); 
            // 递归，并且把递归返回的内容设置成temp的值
            if (temp.length > 0) {
              data[i].children = temp;
            }
          }
        }
        return result;
      }

      const treeJsonData = reverseTree(treeData, null);
      console.log(treeJsonData);
    </script>
  </body>
</html>