前端世界国家下拉选择栏数据

1.在实际的工作环境中我们会遇见一些非常固定但是又数据又很大的下拉框数据，比如各级省份和国家选择。我就遇到了一个需要对世界所有国家进行下拉选择并展示对应国旗的需求。这种需求很少见，但是一旦遇到也很麻烦，就算建字典也会很累不实用。而我更建议将这类数据写在前端。

2.首先是国家的相关下拉数据，我们可以在utils工具文件下建一个JS文件放入此代码，然后在需要的模块中引入该数据就可以了。

export function _CountriesName() {return [{value: "yz",label: "亚洲",children: [// {value: "中国",label: "中国",},// {value: "蒙古",label: "蒙古",},{value: "朝鲜",label: "朝鲜",},// {value: "韩国",label: "韩国",},// {value: "日本",label: "日本",},// {value: "菲律宾",label: "菲律宾",},// {value: "越南",label: "越南",},// {value: "老挝",label: "老挝",},// {value: "柬埔寨",label: "柬埔寨",},// {value: "缅甸",label: "缅甸",},// {value: "泰国",label: "泰国",},// {value: "马来西亚",label: "马来西亚",},// {value: "文莱",label: "文莱",},// {value: "新加坡",label: "新加坡",},// {value: "印度尼西亚",label: "印度尼西亚",},// {value: "东帝汶",label: "东帝汶",},// {value: "尼泊尔",label: "尼泊尔",},// {value: "不丹",label: "不丹",},// {value: "孟加拉国",label: "孟加拉国",},// {value: "印度",label: "印度",},// {value: "巴基斯坦",label: "巴基斯坦",},{value: "斯里兰卡",label: "斯里兰卡",},// {value: "马尔代夫",label: "马尔代夫",},// {value: "哈萨克斯坦",label: "哈萨克斯坦",},// {value: "吉尔吉斯斯坦",label: "吉尔吉斯斯坦",},{value: "塔吉克斯坦",label: "塔吉克斯坦",},// {value: "乌兹别克斯坦",label: "乌兹别克斯坦",},// {value: "土库曼斯坦",label: "土库曼斯坦",},// {value: "阿富汗",label: "阿富汗",},// {value: "伊拉克",label: "伊拉克",},// {value: "伊朗",label: "伊朗",},// {value: "叙利亚",label: "叙利亚",},// {value: "约旦",label: "约旦",},// {value: "黎巴嫩",label: "黎巴嫩",},// {value: "以色列",label: "以色列",},{value: "巴勒斯坦",label: "巴勒斯坦",},// {value: "沙特阿拉伯",label: "沙特阿拉伯",},// {value: "巴林",label: "巴林",},// {value: "卡塔尔",label: "卡塔尔",},{value: "科威特",label: "科威特",},// {value: "阿拉伯联合酋长国",label: "阿拉伯联合酋长国",},// {value: "阿曼",label: "阿曼",},// {value: "也门",label: "也门",},// {value: "格鲁吉亚",label: "格鲁吉亚",},// {value: "亚美尼亚",label: "亚美尼亚",},// {value: "阿塞拜疆",label: "阿塞拜疆",},// {value: "土耳其",label: "土耳其",},// {value: "塞浦路斯",label: "塞浦路斯",},],},{value: "oz",label: "欧洲",children: [// {value: "芬兰",label: "芬兰",},// {value: "瑞典",label: "瑞典",},// {value: "挪威",label: "挪威",},// {value: "冰岛",label: "冰岛",},// {value: "爱沙尼亚",label: "爱沙尼亚",},// {value: "拉脱维亚",label: "拉脱维亚",},// {value: "立陶宛",label: "立陶宛",},// {value: "摩尔多瓦",label: "摩尔多瓦",},// {value: "白俄罗斯",label: "白俄罗斯",},// {value: "俄罗斯",label: "俄罗斯",},// {value: "乌克兰",label: "乌克兰",},// {value: "波兰",label: "波兰",},// {value: "捷克共和国",label: "捷克共和国",},// {value: "斯洛伐克",label: "斯洛伐克",},// {value: "匈牙利",label: "匈牙利",},// {value: "德国",label: "德国",},// {value: "奥地利",label: "奥地利",},// {value: "瑞士",label: "瑞士",},// {value: "列支敦士登",label: "列支敦士登",},// {value: "英国",label: "英国",},// {value: "爱尔兰",label: "爱尔兰",},// {value: "荷兰",label: "荷兰",},// {value: "比利时",label: "比利时",},// {value: "卢森堡",label: "卢森堡",},// {value: "法国",label: "法国",},// {value: "摩纳哥",label: "摩纳哥",},// {value: "罗马尼亚",label: "罗马尼亚",},// {value: "保加利亚",label: "保加利亚",},// {value: "塞尔维亚",label: "塞尔维亚",},// {value: "马其顿",label: "马其顿",},// {value: "斯洛文尼亚",label: "斯洛文尼亚",},{value: "克罗地亚",label: "克罗地亚",},// {value: "黑山共和国",label: "黑山共和国",},// {value: "波斯尼亚和黑塞哥维那",label: "波斯尼亚和黑塞哥维那",},// {value: "阿尔巴尼亚",label: "阿尔巴尼亚",},// {value: "希腊",label: "希腊",},// {value: "意大利",label: "意大利",},{value: "马耳他",label: "马耳他",},{value: "丹麦",label: "丹麦",},// {value: "梵蒂冈",label: "梵蒂冈",},// {value: "圣马力诺",label: "圣马力诺",},// {value: "西班牙",label: "西班牙",},// {value: "葡萄牙",label: "葡萄牙",},// {value: "安道尔共和国",label: "安道尔共和国",},],},{value: "fz",label: "非洲",children: [// {value: "埃及",label: "埃及",},// {value: "利比亚",label: "利比亚",},// {value: "突尼斯",label: "突尼斯",},// {value: "阿尔及利亚",label: "阿尔及利亚",},// {value: "摩洛哥",label: "摩洛哥",},// {value: "苏丹",label: "苏丹",},{value: "南苏丹",label: "南苏丹",},// {value: "埃塞俄比亚",label: "埃塞俄比亚",},// {value: "厄立特里亚",label: "厄立特里亚",},// {value: "索马里",label: "索马里",},// {value: "吉布提",label: "吉布提",},// {value: "肯尼亚",label: "肯尼亚",},// {value: "坦桑尼亚",label: "坦桑尼亚",},// {value: "乌干达",label: "乌干达",},// {value: "卢旺达",label: "卢旺达",},// {value: "布隆迪",label: "布隆迪",},// {value: "塞舌尔",label: "塞舌尔",},// {value: "乍得共和国",label: "乍得共和国",},// {value: "中非共和国",label: "中非共和国",},// {value: "喀麦隆",label: "喀麦隆",},// {value: "赤道几内亚",label: "赤道几内亚",},// {value: "加蓬",label: "加蓬",},// {value: "刚果共和国",label: "刚果共和国",},// {value: "刚果民主共和国",label: "刚果民主共和国",},// {value: "圣多美和普林西比",label: "圣多美和普林西比",},// {value: "毛里塔尼亚",label: "毛里塔尼亚",},// {value: "塞内加尔",label: "塞内加尔",},// {value: "冈比亚",label: "冈比亚",},// {value: "马里共和国",label: "马里共和国",},// {value: "布基纳法索",label: "布基纳法索",},// {value: "几内亚",label: "几内亚",},// {value: "几内亚比绍",label: "几内亚比绍",},{value: "佛得角",label: "佛得角",},// {value: "塞拉利昂",label: "塞拉利昂",},{value: "利比里亚",label: "利比里亚",},// {value: "科特迪瓦",label: "科特迪瓦",},// {value: "加纳",label: "加纳",},// {value: "多哥",label: "多哥",},// {value: "贝宁共和国",label: "贝宁共和国",},// {value: "尼日尔",label: "尼日尔",},// {value: "尼日利亚",label: "尼日利亚",},// {value: "赞比亚",label: "赞比亚",},// {value: "安哥拉",label: "安哥拉",},// {value: "津巴布韦",label: "津巴布韦",},// {value: "马拉维",label: "马拉维",},// {value: "莫桑比克",label: "莫桑比克",},// {value: "博茨瓦纳",label: "博茨瓦纳",},// {value: "纳米比亚",label: "纳米比亚",},// {value: "南非",label: "南非",},// {value: "斯威士兰",label: "斯威士兰",},// {value: "莱索托",label: "莱索托",},// {value: "马达加斯加",label: "马达加斯加",},// {value: "科摩罗联盟",label: "科摩罗联盟",},// {value: "毛里求斯",label: "毛里求斯",},],},{value: "bmz",label: "北美洲",children: [// {value: "加拿大",label: "加拿大",},// {value: "美国",label: "美国",},// {value: "墨西哥",label: "墨西哥",},{value: "危地马拉",label: "危地马拉",},{value: "伯利兹",label: "伯利兹",},// {value: "萨尔瓦多",label: "萨尔瓦多",},// {value: "洪都拉斯",label: "洪都拉斯",},// {value: "尼加拉瓜",label: "尼加拉瓜",},{value: "哥斯达黎加",label: "哥斯达黎加",},// {value: "巴拿马",label: "巴拿马",},// {value: "巴哈马群岛",label: "巴哈马群岛",},// {value: "古巴",label: "古巴",},// {value: "牙买加",label: "牙买加",},// {value: "海地",label: "海地",},// {value: "多米尼加共和国",label: "多米尼加共和国",},// {value: "安提瓜和巴布达",label: "安提瓜和巴布达",},// {value: "圣基茨和尼维斯",label: "圣基茨和尼维斯",},// {value: "多米尼克",label: "多米尼克",},// {value: "圣卢西亚",label: "圣卢西亚",},// {value: "圣文森特和格林纳丁斯",label: "圣文森特和格林纳丁斯",},// {value: "格林纳达",label: "格林纳达",},// {value: "巴巴多斯",label: "巴巴多斯",},// {value: "特立尼达和多巴哥",label: "特立尼达和多巴哥",},],},{value: "nmz",label: "南美洲",children: [// {value: "哥伦比亚",label: "哥伦比亚",},// {value: "委内瑞拉",label: "委内瑞拉",},// {value: "圭亚那",label: "圭亚那",},// {value: "苏里南",label: "苏里南",},// {value: "厄瓜多尔",label: "厄瓜多尔",},// {value: "秘鲁",label: "秘鲁",},// {value: "巴西",label: "巴西",},// {value: "智利",label: "智利",},// {value: "阿根廷",label: "阿根廷",},// {value: "乌拉圭",label: "乌拉圭",},// {value: "巴拉圭",label: "巴拉圭",},],},{value: "dyz",label: "大洋洲",children: [// {value: "澳大利亚",label: "澳大利亚",},{value: "新西兰",label: "新西兰",},{value: "帕劳",label: "帕劳",},{value: "密克罗尼西亚联邦",label: "密克罗尼西亚联邦",},{value: "马绍尔群岛",label: "马绍尔群岛",},{value: "基里巴斯",label: "基里巴斯",},{value: "瑙鲁",label: "瑙鲁",},{value: "巴布亚新几内亚",label: "巴布亚新几内亚",},{value: "所罗门群岛",label: "所罗门群岛",},// {value: "瓦努阿图",label: "瓦努阿图",},{value: "斐济",label: "斐济",},// {value: "图瓦卢",label: "图瓦卢",},{value: "萨摩亚",label: "萨摩亚",},// {value: "汤加",label: "汤加",},{value: "库克群岛",label: "库克群岛",},],},]
}

3.我所遇到的场景需要匹配对应的国家国旗，下列是整理好的国旗图片。

前端世界国家下拉选择栏数据相关推荐

英文的国家下拉框，需要的请拿走
每次有客户需要的时候总是去网上找,这里收藏一下,免得下次用到的时候再麻烦. 就是一个普通的HTML下拉,没有任何功能. <select id="country" name=& ...
开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗？
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...
开发一个出生年份的下拉选择框供用户选择_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 01 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 02 下拉菜单 ...
layui表格下拉选择、日期选择
一.下拉选择改动三个地方: 下拉选择模板数据渲染下拉选择监听填充数据 //表格 {title: '是否棚改房<span class="titletips">*&l ...
php利用表格敬将所选择的数据显示出来,单元格下拉筛选设置/Excel对筛选后的单元格进行下拉填充...
EXCEL里怎样让一个单元格能有下拉菜单? 要设置下拉菜单的单元格(或格区)----数据---有效---"允许"中选择"序"---"来源"中 ...
仿携程oracle课程设计,一个不错的仿携程自定义数据下拉选择select
这是一个仿携程自定义的数据下拉选择select,对一些比较重要的参数进行的描述,方便初学者 /* *id : id 当前插件的父元素 *data : json 选择的数据(json格式) *bool ...
element 下拉选择_猿实战18——商品发布之类目选择
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,变身猿人找到工作不是问题.还等什么呢?关注公号,取基 ...
2021-12-11 工作记录--Wechat applet-结合＜van-popup＞和＜van-picker＞实现年份、月份下拉选择弹窗+禁止滚动穿透
结合<van-popup>和<van-picker> 实现年份.月份下拉选择弹窗一.实现效果二.实现代码 1.HTML attendance.wxml <!-- 年份 ...
iOS 9，为前端世界都带来了些什么？「译」
2015 年 9 月,Apple 重磅发布了全新的 iPhone 6s/6s Plus.iPad Pro 与全新的操作系统 watchOS 2 与 tvOS 9(是的,这货居然是第 9 版),加上已经 ...

前端世界国家下拉选择栏数据

前端世界国家下拉选择栏数据相关推荐

最新文章

热门文章