把全球国家列表JSON数据生成html select选项表单
留言表单有一个选择国家地区的select选项列表,一个一个手动输入显然很费劲还容易出错,使用js插件又没太大必要,直接使用在线工具生成一个国家列表的json数据,然后直接调用数据生成比较合适。
生成国家地区列表的在线工具可以用AI工具,如deepseek,下面是生成的结果:
[ {"value": "AF", "label": "阿富汗"}, {"value": "AL", "label": "阿尔巴尼亚"}, {"value": "DZ", "label": "阿尔及利亚"}, {"value": "AD", "label": "安道尔"}, {"value": "AO", "label": "安哥拉"}, {"value": "AG", "label": "安提瓜和巴布达"}, {"value": "AR", "label": "阿根廷"}, {"value": "AM", "label": "亚美尼亚"}, {"value": "AU", "label": "澳大利亚"}, {"value": "AT", "label": "奥地利"}, {"value": "AZ", "label": "阿塞拜疆"}, {"value": "BS", "label": "巴哈马"}, {"value": "BH", "label": "巴林"}, {"value": "BD", "label": "孟加拉国"}, {"value": "BB", "label": "巴巴多斯"}, {"value": "BY", "label": "白俄罗斯"}, {"value": "BE", "label": "比利时"}, {"value": "BZ", "label": "伯利兹"}, {"value": "BJ", "label": "贝宁"}, {"value": "BT", "label": "不丹"}, {"value": "BO", "label": "玻利维亚"}, {"value": "BA", "label": "波黑"}, {"value": "BW", "label": "博茨瓦纳"}, {"value": "BR", "label": "巴西"}, {"value": "BN", "label": "文莱"}, {"value": "BG", "label": "保加利亚"}, {"value": "BF", "label": "布基纳法索"}, {"value": "BI", "label": "布隆迪"}, {"value": "CV", "label": "佛得角"}, {"value": "KH", "label": "柬埔寨"}, {"value": "CM", "label": "喀麦隆"}, {"value": "CA", "label": "加拿大"}, {"value": "CF", "label": "中非"}, {"value": "TD", "label": "乍得"}, {"value": "CL", "label": "智利"}, {"value": "CO", "label": "哥伦比亚"}, {"value": "KM", "label": "科摩罗"}, {"value": "CG", "label": "刚果(布)"}, {"value": "CD", "label": "刚果(金)"}, {"value": "CR", "label": "哥斯达黎加"}, {"value": "CI", "label": "科特迪瓦"}, {"value": "HR", "label": "克罗地亚"}, {"value": "CU", "label": "古巴"}, {"value": "CY", "label": "塞浦路斯"}, {"value": "CZ", "label": "捷克"}, {"value": "DK", "label": "丹麦"}, {"value": "DJ", "label": "吉布提"}, {"value": "DM", "label": "多米尼克"}, {"value": "DO", "label": "多米尼加"}, {"value": "EC", "label": "厄瓜多尔"}, {"value": "EG", "label": "埃及"}, {"value": "SV", "label": "萨尔瓦多"}, {"value": "GQ", "label": "赤道几内亚"}, {"value": "ER", "label": "厄立特里亚"}, {"value": "EE", "label": "爱沙尼亚"}, {"value": "SZ", "label": "斯威士兰"}, {"value": "ET", "label": "埃塞俄比亚"}, {"value": "FJ", "label": "斐济"}, {"value": "FI", "label": "芬兰"}, {"value": "FR", "label": "法国"}, {"value": "GA", "label": "加蓬"}, {"value": "GM", "label": "冈比亚"}, {"value": "GE", "label": "格鲁吉亚"}, {"value": "DE", "label": "德国"}, {"value": "GH", "label": "加纳"}, {"value": "GR", "label": "希腊"}, {"value": "GD", "label": "格林纳达"}, {"value": "GT", "label": "危地马拉"}, {"value": "GN", "label": "几内亚"}, {"value": "GW", "label": "几内亚比绍"}, {"value": "GY", "label": "圭亚那"}, {"value": "HT", "label": "海地"}, {"value": "HN", "label": "洪都拉斯"}, {"value": "HU", "label": "匈牙利"}, {"value": "IS", "label": "冰岛"}, {"value": "IN", "label": "印度"}, {"value": "ID", "label": "印度尼西亚"}, {"value": "IR", "label": "伊朗"}, {"value": "IQ", "label": "伊拉克"}, {"value": "IE", "label": "爱尔兰"}, {"value": "IL", "label": "以色列"}, {"value": "IT", "label": "意大利"}, {"value": "JM", "label": "牙买加"}, {"value": "JP", "label": "日本"}, {"value": "JO", "label": "约旦"}, {"value": "KZ", "label": "哈萨克斯坦"}, {"value": "KE", "label": "肯尼亚"}, {"value": "KI", "label": "基里巴斯"}, {"value": "KP", "label": "朝鲜"}, {"value": "KR", "label": "韩国"}, {"value": "KW", "label": "科威特"}, {"value": "KG", "label": "吉尔吉斯斯坦"}, {"value": "LA", "label": "老挝"}, {"value": "LV", "label": "拉脱维亚"}, {"value": "LB", "label": "黎巴嫩"}, {"value": "LS", "label": "莱索托"}, {"value": "LR", "label": "利比里亚"}, {"value": "LY", "label": "利比亚"}, {"value": "LI", "label": "列支敦士登"}, {"value": "LT", "label": "立陶宛"}, {"value": "LU", "label": "卢森堡"}, {"value": "MG", "label": "马达加斯加"}, {"value": "MW", "label": "马拉维"}, {"value": "MY", "label": "马来西亚"}, {"value": "MV", "label": "马尔代夫"}, {"value": "ML", "label": "马里"}, {"value": "MT", "label": "马耳他"}, {"value": "MH", "label": "马绍尔群岛"}, {"value": "MR", "label": "毛里塔尼亚"}, {"value": "MU", "label": "毛里求斯"}, {"value": "MX", "label": "墨西哥"}, {"value": "FM", "label": "密克罗尼西亚"}, {"value": "MD", "label": "摩尔多瓦"}, {"value": "MC", "label": "摩纳哥"}, {"value": "MN", "label": "蒙古"}, {"value": "ME", "label": "黑山"}, {"value": "MA", "label": "摩洛哥"}, {"value": "MZ", "label": "莫桑比克"}, {"value": "MM", "label": "缅甸"}, {"value": "NA", "label": "纳米比亚"}, {"value": "NR", "label": "瑙鲁"}, {"value": "NP", "label": "尼泊尔"}, {"value": "NL", "label": "荷兰"}, {"value": "NZ", "label": "新西兰"}, {"value": "NI", "label": "尼加拉瓜"}, {"value": "NE", "label": "尼日尔"}, {"value": "NG", "label": "尼日利亚"}, {"value": "MK", "label": "北马其顿"}, {"value": "NO", "label": "挪威"}, {"value": "OM", "label": "阿曼"}, {"value": "PK", "label": "巴基斯坦"}, {"value": "PW", "label": "帕劳"}, {"value": "PA", "label": "巴拿马"}, {"value": "PG", "label": "巴布亚新几内亚"}, {"value": "PY", "label": "巴拉圭"}, {"value": "PE", "label": "秘鲁"}, {"value": "PH", "label": "菲律宾"}, {"value": "PL", "label": "波兰"}, {"value": "PT", "label": "葡萄牙"}, {"value": "QA", "label": "卡塔尔"}, {"value": "RO", "label": "罗马尼亚"}, {"value": "RU", "label": "俄罗斯"}, {"value": "RW", "label": "卢旺达"}, {"value": "KN", "label": "圣基茨和尼维斯"}, {"value": "LC", "label": "圣卢西亚"}, {"value": "VC", "label": "圣文森特和格林纳丁斯"}, {"value": "WS", "label": "萨摩亚"}, {"value": "SM", "label": "圣马力诺"}, {"value": "ST", "label": "圣多美和普林西比"}, {"value": "SA", "label": "沙特阿拉伯"}, {"value": "SN", "label": "塞内加尔"}, {"value": "RS", "label": "塞尔维亚"}, {"value": "SC", "label": "塞舌尔"}, {"value": "SL", "label": "塞拉利昂"}, {"value": "SG", "label": "新加坡"}, {"value": "SK", "label": "斯洛伐克"}, {"value": "SI", "label": "斯洛文尼亚"}, {"value": "SB", "label": "所罗门群岛"}, {"value": "SO", "label": "索马里"}, {"value": "ZA", "label": "南非"}, {"value": "SS", "label": "南苏丹"}, {"value": "ES", "label": "西班牙"}, {"value": "LK", "label": "斯里兰卡"}, {"value": "SD", "label": "苏丹"}, {"value": "SR", "label": "苏里南"}, {"value": "SE", "label": "瑞典"}, {"value": "CH", "label": "瑞士"}, {"value": "SY", "label": "叙利亚"}, {"value": "TJ", "label": "塔吉克斯坦"}, {"value": "TZ", "label": "坦桑尼亚"}, {"value": "TH", "label": "泰国"}, {"value": "TL", "label": "东帝汶"}, {"value": "TG", "label": "多哥"}, {"value": "TO", "label": "汤加"}, {"value": "TT", "label": "特立尼达和多巴哥"}, {"value": "TN", "label": "突尼斯"}, {"value": "TR", "label": "土耳其"}, {"value": "TM", "label": "土库曼斯坦"}, {"value": "TV", "label": "图瓦卢"}, {"value": "UG", "label": "乌干达"}, {"value": "UA", "label": "乌克兰"}, {"value": "AE", "label": "阿联酋"}, {"value": "GB", "label": "英国"}, {"value": "US", "label": "美国"}, {"value": "UY", "label": "乌拉圭"}, {"value": "UZ", "label": "乌兹别克斯坦"}, {"value": "VU", "label": "瓦努阿图"}, {"value": "VA", "label": "梵蒂冈"}, {"value": "VE", "label": "委内瑞拉"}, {"value": "VN", "label": "越南"}, {"value": "YE", "label": "也门"}, {"value": "ZM", "label": "赞比亚"}, {"value": "ZW", "label": "津巴布韦"}, {"value": "CN", "label": "中国"}, {"value": "TW", "label": "中国台湾省"}, {"value": "HK", "label": "中国香港特别行政区"}, {"value": "MO", "label": "中国澳门特别行政区"} ]
上面结果由 ai 工具 DeepSeek 生成,把结果保存为.txt文本,如country.txt
HTML代码:
<select id="country" name="country"> <option value="" class="loading">Loading country list ..</option> </select>
js代码:
$(function(){ fetch('../json/country.txt', { method: 'GET', cache: 'no-store' // 禁用缓存 }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // 将响应解析为 JSON 格式 }) .then(data => { // 处理返回的数据 var options = ''; $.each(data, function (key, value) { var option = "<option value=" + value.label + ">" + value.label + "</option>"; options += option; }); document.getElementById('18254').innerHTML = options; $('.msgpop .submit').click(function(){ alert('提交请求'); }); }) .catch(error => { // 处理错误 console.error('There was a problem with your fetch operation:', error); }); });
使用 Fetch API 发起请求,相比传统的 XMLHttpRequest 对象,Fetch API 更易于使用且功能更丰富。但要注意跨域请求问题。
fetch()
函数发送了一个 GET 请求到指定的 URL,并返回一个 Promise 对象,然后使用 .then()
方法处理响应,并将其解析为 JSON 格式。
如果请求失败或者响应状态码不在 200-299 范围内,将会抛出一个错误并通过 .catch()
方法捕获和处理。
对返回的数据使用 $.each
处理请生成select的option选项,然后插入到指定ID的select标签元素里。
因为是异步请求,所以请求完才能提交表单。