Phone mask selection code available. This is necessary to display the flag of the country with the given area code mask
$(function() {
function maskPhone() {
var country = $('#country option:selected').val();
switch (country) {
case "ru":
$("#phone").mask("+7(999) 999-99-99");
break;
case "by":
$("#phone").mask("+375(99) 999-99-99");
break;
}
}
maskPhone();
$('#country').change(function() {
maskPhone();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<select id="country" class="form-control">
<option value="ru">RU +7</option>
<option value="by">BY +375</option>
</select>
<input id="phone" type="text" name="customer_phone" value="" >How to change select option to ul li ?
You might use unicode flags:
$(function() {
function maskPhone() {
var country = $('#country option:selected').val();
switch (country) {
case "ru":
$("#phone").mask("+7(999) 999-99-99");
break;
case "by":
$("#phone").mask("+375(99) 999-99-99");
break;
}
}
maskPhone();
$('#country').change(function() {
maskPhone();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<select id="country" class="form-control">
<option value="ru">🇷🇺 RU +7</option>
<option value="by">🇧🇾 BY +375</option>
</select>
<input id="phone" type="text" name="customer_phone" value="" >