我想在 html 输入标签中添加国家标志，是的，引导程序助手可以做到这一点。但我不知道如何添加链接和脚本来解决我的问题。那么有什么帮助吗？
几天前我遇到了这个问题，以下是我在 html 文件中处理此问题的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Specify character encoding for the document -->
<meta charset="UTF-8">
<!-- Ensure proper rendering and touch zooming on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to the Select2 CSS library for styling dropdowns -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="col-4">
<!-- Label for the dropdown field -->
<label for="country" class="form-label">Code :</label>
<!-- Dropdown to select a country code -->
<select asp-for="Input.CountryCode1" class="form-control" id="country1">
<!-- Each option contains a country code with a data-flag attribute for flags -->
<option value="+243" data-flag="cd">+243</option>
<option value="+242" data-flag="cg">+242</option>
<option value="+1" data-flag="us"> +1</option>
<option value="+1" data-flag="ca"> +1</option>
<option value="+7" data-flag="kz"> +7</option>
<option value="+20" data-flag="eg"> +20</option>
<option value="+30" data-flag="gr"> +30</option>
<option value="+32" data-flag="be"> +32</option>
<option value="+33" data-flag="fr"> +33</option>
<option value="+36" data-flag="hu"> +36</option>
<option value="+39" data-flag="it"> +39</option>
<option value="+43" data-flag="at"> +43</option>
<option value="+44" data-flag="gg"> +44</option>
<option value="+44" data-flag="je"> +44</option>
<option value="+49" data-flag="de"> +49</option>
<option value="+54" data-flag="ar"> +54</option>
<option value="+55" data-flag="br"> +55</option>
<option value="+56" data-flag="cl"> +56</option>
<option value="+57" data-flag="co"> +57</option>
<option value="+61" data-flag="au"> +61</option>
<option value="+61" data-flag="cc"> +61</option>
<option value="+62" data-flag="id"> +62</option>
<option value="+81" data-flag="jp"> +81</option>
<option value="+86" data-flag="cn"> +86</option>
<option value="+90" data-flag="tr"> +90</option>
<option value="+91" data-flag="in"> +91</option>
<option value="+93" data-flag="af"> +93</option>
<option value="+98" data-flag="ir"> +98</option>
<option value="+213" data-flag="dz"> +213</option>
<option value="+218" data-flag="ly"> +218</option>
<option value="+225" data-flag="ci"> +225</option>
<option value="+229" data-flag="bj"> +229</option>
<option value="+231" data-flag="lr"> +231</option>
<option value="+236" data-flag="cf"> +236</option>
<option value="+237" data-flag="cm"> +237</option>
<option value="+238" data-flag="cv"> +238</option>
<option value="+244" data-flag="ao"> +244</option>
<option value="+245" data-flag="gw"> +245</option>
<option value="+250" data-flag="rw"> +250</option>
<option value="+254" data-flag="ke"> +254</option>
<option value="+257" data-flag="bi"> +257</option>
<option value="+261" data-flag="mg"> +261</option>
<option value="+266" data-flag="ls"> +266</option>
<option value="+269" data-flag="km"> +269</option>
<option value="+289" data-flag="et"> +289</option>
<option value="+376" data-flag="ad"> +376</option>
</select>
</div>
<script>
$(document).ready(function () {
// Function to format dropdown items with country flags
function formatCountry(option) {
// Return the text if no option is selected
if (!option.id) {
return option.text; // No icon for the placeholder
}
// Get the flag data from the option element
const flag = $(option.element).data('flag');
if (flag) {
// Return the text along with the flag icon
return $(`
<span><img src="https://flagcdn.com/w40/${flag}.png"
class="img-flag"
style="width: 20px; margin-right: 10px;"/> ${option.text}</span>
`);
}
return option.text; // Return only text if no flag is found
}
// Initialize Select2 on dropdowns with IDs #country1, #country2, and #country3
$('#country1, #country2, #country3').select2({
templateResult: formatCountry, // Customize dropdown appearance
templateSelection: formatCountry, // Customize selected item appearance
width: '100%' // Set the dropdown width to 100%
});
});
</script>
<!-- Link to Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Select2 JavaScript library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</body>
</html>