xxxxxxxxxx
<!-- Include necessary CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
<!-- HTML select dropdown -->
<select id="countrySelect">
<option value="">Select Country</option>
<option value="AF" data-icon="flag-icon flag-icon-af">Afghanistan</option>
<option value="AL" data-icon="flag-icon flag-icon-al">Albania</option>
<!-- Add more country options with respective flag classes -->
</select>
<!-- JavaScript event listener to track selected option -->
<script>
const countrySelect = document.getElementById("countrySelect");
countrySelect.addEventListener("change", function() {
const selectedOption = this.options[this.selectedIndex];
const countryValue = selectedOption.value;
const countryFlag = selectedOption.getAttribute("data-icon");
console.log("Selected Country: " + countryValue);
console.log("Selected Flag Class: " + countryFlag);
// Perform further actions, if needed
});
</script>
xxxxxxxxxx
<select class="selectpicker countrypicker" data-flag="true" ></select>
xxxxxxxxxx
<html lang="en">
<head>
<title>HTML Select Country Phone Code List with Flags</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
<input name="phone" type="text" id="phone"/>
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
separateDialCode: true,
excludeCountries: ["in", "il"],
preferredCountries: ["ru", "jp", "pk", "no"]
});
</script>
</body>
</html>