admin管理员组文章数量:1410706
I have a contact number input field and I was able to prepend a country code dropdown to the input field.
Now when user selects the country code, the number format will change according to the selected country code.
My question now is how do you loop all the country code out from the library and put it into the dropdown? I tried using some functions like "getSupportedRegions();" but it is saying undefined. I already have the script-src included in the head, am I doing it wrong?
<!DOCTYPE html>
<html>
<head>
<script src=".9.1/jquery.min.js"></script>
<link rel="stylesheet" href=".5.2/css/bootstrap.min.css">
<script src=".js/1.16.0/umd/popper.min.js"></script>
<script src=".5.2/js/bootstrap.min.js"></script>
<script src="@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>
<body>
<label for="inputContactNumber">Contact Number</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="select-country" class="btn contact-btn dropdown-toggle">
<option>SG</option>
<option>MY</option>
<option>US</option>
<option>TH</option>
</select>
</div>
<input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
</div>
<script type="text/javascript">
$(".phone-format").keyup(function () {
var val_old = $(this).val();
var newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
$(this).focus().val('').val(newString);
});
</script>
</body>
</html>I have a contact number input field and I was able to prepend a country code dropdown to the input field.
Now when user selects the country code, the number format will change according to the selected country code.
My question now is how do you loop all the country code out from the library and put it into the dropdown? I tried using some functions like "getSupportedRegions();" but it is saying undefined. I already have the script-src included in the head, am I doing it wrong?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg./libphonenumber-js@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>
<body>
<label for="inputContactNumber">Contact Number</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="select-country" class="btn contact-btn dropdown-toggle">
<option>SG</option>
<option>MY</option>
<option>US</option>
<option>TH</option>
</select>
</div>
<input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
</div>
<script type="text/javascript">
$(".phone-format").keyup(function () {
var val_old = $(this).val();
var newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
$(this).focus().val('').val(newString);
});
</script>
</body>
</html>- This is just a testing one actually it doesn't work. Sorry I did not mention it. I should go ahead and erase that. – HNG Commented Dec 1, 2020 at 8:22
- Thanks I didn't know how to covert to stack overflow snippet ! :D – HNG Commented Dec 1, 2020 at 8:23
- Found the function for you, I will delete my ments above since they're no longer relevant. Feel free to delete your ments too just to clean up the Q/A page, and then I will delete this one. :-) – Michael Geary Commented Dec 1, 2020 at 8:35
1 Answer
Reset to default 5The function you're looking for is libphonenumber.getCountries() (documentation).
I added a call to this function at the beginning of your script with the code to generate the country option list:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg./libphonenumber-js@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>
<body>
<label for="inputContactNumber">Contact Number</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="select-country" class="btn contact-btn dropdown-toggle">
</select>
</div>
<input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
</div>
<script type="text/javascript">
const countries = libphonenumber.getCountries();
const optionList = countries.map( country => `<option>${country}</option>` );
$(".select-country").html( optionList );
$(".phone-format").keyup(function () {
const val_old = $(this).val();
const newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
$(this).focus().val(newString);
});
</script>
</body>
</html>I also changed var to const. Always use const when you can, or let if you need to mutate (reassign) a variable. And a minor point, in this line:
$(this).focus().val('').val(newString);
You don't need to do the val(''), just set the new value.
本文标签： javascriptGetting all country codes from libphonenumberjs and looping it outStack Overflow
版权声明：本文标题：javascript - Getting all country codes from libphonenumber-js and looping it out - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744989505a2636295.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论