前言

前段时间在做项目的时候遇到了一个需求需要做一个户籍地的三级联级下拉菜单，在这里分享一下心得，技术有限方法比较蠢

获取户籍地代码和地名

自己在网上找了一下现成的json 比较少，而且有一些比较老，所以就打算自己来了。
首先进到民政官网http://www.mca.gov.cn/article/sj/xzqh/1980/选择最新的一条之后进到这个页面

之后要把它变成json，我的方法比较蠢，ctrl+a全选复制然后掐头去尾只保留代码和地名然后复制到wps的表格中效果如下

图片的C和D是之后加的函数
编写函数在C1编写=CONCATENATE("{"“code”":""",A1,""","“name”":""",B1,"""},")下拉复制到最后一行在D2编写链接C的值=CONCATENATE("[",CONCAT(C1:C900),"]") 得一个区划json数组 这里出现了一个!value 经查验发现是concat这个最大只能链接962个于是我改成只链接900个分4次来 ctrl +c 复制单元格D1 出现虚线表示成功之后创建一个json文件粘贴出来得到

这个数组显然不是我们要的因为要用antd的联级选择所以需要一个树结构，可以发现这个json数组里省字段前面没有空格，市前面一个空格，县三个空格附代码利用这点编写一个js函数把它处理成想要的树结构如下

    const toJson = () => {console.log(hk)//hk是引用的json数组let hk1 = []let shen = {}let shi = undefinedhk.map(({code,name})=>{if(name.substr(0,1) != ' '){//省shen = {value:code,label:name,children:[]}hk1.push(shen)shi = undefined}if(name.substr(0,3) !== '   ' && name.substr(0,1) === ' '){//市shi = {value:code,label:name.trim(),children:[]} //trim 去除空格shen.children.push(shi)}if(name.substr(0,3) === '   '){//县if(Util.isEmpty(shi)){//没有市说明是直辖 // 这里是一个判断空值的方法 可自行编写shen.children.push({value:code,label:name.trim()})//直接push到第一级下 并且去除空格}else{shi.children.push({value:code,label:name.trim()})//第二级}}})console.log(hk1)console.log(JSON.stringify(hk1))//转json}

得到

最后附上成果我已经把上传直接下载即可
https://download.csdn.net/download/weixin_45872877/18828594

使用这种方法即使更新也可以快速得得到想要得json结构数据

制作下拉菜单

这里使用了 antd的 Cascader级联选择

function Cascaderhuji(props){const _onChange = (value)=>{console.log(value)}return (<Cascader options={hk} onChange={_onChange} placeholder="请选择"/>)
}

效果

结尾

如果有其它的好方法欢迎留言 json数据放在资源当中0积分下载没有仔细核验如果有问题欢迎留言再次附上资源链接 https://download.csdn.net/download/weixin_45872877/18828594

使用react做一个户籍地下拉选择（含2020版区划户籍代码json）相关推荐

用react做一个音乐站webapp
demo 在线预览:小琳音乐站源码:https://gitee.com/mind251314/hyl-music 介绍身为一个爱听歌的前端,只要写起代码耳机必需放着bgm伴奏.就在前几天我突发奇想 ...
用React做一个音乐播放器
介绍任何正在学习 React 并想使用 React 构建项目的人.有各种博客和文章可以为开发人员指导此类项目.我确实浏览过这些文章,但其中总是缺少一种项目.缺少的项目是音乐播放器和视频播放器.这两个 ...
我用Python做一个量化指数增强策略，爽了！附代码！
这是邢不行第 84 期量化小讲堂的分享作者 | 邢不行.密斯锌硒 A股是一个神奇的地方,它最大的特点就是多年不涨和永远的3000点. 正因如此,调侃A股的段子层出不穷. 甚至连中国男足这么烂的行业都 ...
[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 （详解版）
前言这次使用了 vue 来编写 2048,主要目的是温习一下 vue. 但是好像没有用到太多 vue 的东西,==! 估计可能习惯了不用框架吧之前由于时间关系没有对实现过程详细讲解,本次会详细讲解 ...
2048小游戏html制作,[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 （详解版）
前言这次使用了 vue 来编写 2048,主要目的是温习一下 vue. 但是好像没有用到太多 vue 的东西,==! 估计可能习惯了不用框架吧之前由于时间关系没有对实现过程详细讲解,本次会详细讲解 ...
用React做一个新拟态计算器
React Calculator 首先,先看成果(codepen): 项目中我使用到的技术: HTML.CSS.JavaScript三件套 React SCSS 本项目是freeCodeCamp上的其 ...
react 组件怎么公用_用 react 做一个跟随组件的 tooltip
定位的难题你可能听说国很多关于定位型组件种类.名词:popup, tooltip, popover, overlay...(后面将统称为 overlay).这些都是定位型组件,当你需要触发显示它们的 ...
web前端项目（一）做一个网易考拉官网常规静态页面 + 页面放到http服务 + 前后端分离
1 新建文件夹分css img 文件夹 index.html 静态页面 2 将本地做的静态页面放到 http 服务 localhost:8080 设置nodejs静态目录 npm install e ...
如何快速做一个微信自动拉群机器人足够简单足够粗暴
wechaty 首先,wechaty了解一下,文档链接:https://docs.chatie.io/v/zh/ 只需要6行代码,你就可以通过个人号搭建一个微信机器人功能 ,用来自动管理微信消息,是不 ...

使用react做一个户籍地下拉选择（含2020版区划户籍代码json）

前言

获取户籍地代码和地名

制作下拉菜单

结尾

使用react做一个户籍地下拉选择（含2020版区划户籍代码json）相关推荐

最新文章

热门文章