把全球国家列表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标签元素里。
因为是异步请求,所以请求完才能提交表单。