一、先看效果
二、代码实现（含国旗）
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择国家</title><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css"><style>.country-select {width: 300px;padding: 10px;font-size: 16px;}</style>
</head>
<body><h2>选择国家</h2><label for="country">选择国家:</label><select id="country" class="country-select"><option value="AF" data-flag="af">阿富汗</option><option value="AL" data-flag="al">阿尔巴尼亚</option><option value="DZ" data-flag="dz">阿尔及利亚</option><option value="US" data-flag="us">美国</option><option value="CN" data-flag="cn">中国</option><option value="IN" data-flag="in">印度</option><option value="JP" data-flag="jp">日本</option><option value="BR" data-flag="br">巴西</option><option value="GB" data-flag="gb">英国</option><option value="CA" data-flag="ca">加拿大</option><option value="IT" data-flag="it">意大利</option><option value="JO" data-flag="jo">约旦</option></select><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script><script>$(document).ready(function() {$('#country').select2({templateResult: formatState,templateSelection: formatState});function formatState(state) {if (!state.id) {return state.text;}var $state = $('<span><span class="flag-icon flag-icon-' + $(state.element).data('flag') + '"></span> ' + state.text + '</span>');return $state;}});</script></body>
</html>
2.1说明其余国家自行补充
步骤访问该地址或者ISO 替换value值即可
https://en.wikipedia.org/wiki/ISO_3166-1
<option value="DZ" data-flag="dz">阿尔及利亚</option>
或者参考
全国国家国家码-CSDN博客
三、代码实现（不含国旗）
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择国家及电话号码区号</title><!-- 使用不同的 CDN --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/5.0.0/css/flag-icons.min.css"><style>.country-select {width: 350px;padding: 10px;font-size: 16px;}/* 添加必要的样式来确保国旗显示 */.country-option {display: flex;align-items: center;padding: 5px;}.country-option span {margin-left: 10px;}.flag-icon {width: 20px; /* 调整大小 */height: 20px;display: inline-block;}</style>
</head>
<body><h2>选择国家及电话号码区号</h2><label for="country">选择国家:</label><select id="country" class="country-select"><option value="+86"><span class="flag-icon flag-icon-cn"></span> 中国 (+86)</option><option value="+1"><span class="flag-icon flag-icon-us"></span> 美国 (+1)</option><option value="+44"><span class="flag-icon flag-icon-gb"></span> 英国 (+44)</option><option value="+91"><span class="flag-icon flag-icon-in"></span> 印度 (+91)</option><option value="+81"><span class="flag-icon flag-icon-jp"></span> 日本 (+81)</option><option value="+49"><span class="flag-icon flag-icon-de"></span> 德国 (+49)</option><option value="+33"><span class="flag-icon flag-icon-fr"></span> 法国 (+33)</option><option value="+61"><span class="flag-icon flag-icon-au"></span> 澳大利亚 (+61)</option><option value="+55"><span class="flag-icon flag-icon-br"></span> 巴西 (+55)</option><option value="+27"><span class="flag-icon flag-icon-za"></span> 南非 (+27)</option></select><script>// 如果需要对选择的国家做更多操作，可以通过 JavaScript 来处理document.getElementById("country").addEventListener("change", function() {const selectedCountryCode = this.value;console.log("选择的国家电话区号:", selectedCountryCode);});</script></body>
</html>
