留言表单有一个选择国家地区的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标签元素里。
因为是异步请求,所以请求完才能提交表单。