从 libphonenumber-js 获取所有国家代码并循环播放答案

【问题标题】：Getting all country codes from libphonenumber-js and looping it out从 libphonenumber-js 获取所有国家代码并循环播放
【发布时间】：2020-12-01 07:36:42
【问题描述】：

我有一个联系号码输入字段，并且我能够在输入字段前添加一个国家代码下拉列表。

现在当用户选择国家代码时，数字格式会根据选择的国家代码而改变。

我现在的问题是如何将所有国家/地区代码从库中循环出来并将其放入下拉列表中？我尝试使用一些函数，如“getSupportedRegions();”但它说的是未定义。我已经在头部包含了script-src，我做错了吗？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/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>

【问题讨论】：

这只是一个测试，实际上它不起作用。对不起，我没有提到它。我应该继续删除它。
谢谢我不知道如何隐藏堆栈溢出 sn-p ！ :D
为您找到了该功能，我将删除我上面的 cmets，因为它们不再相关。也可以随意删除你的 cmets 来清理 Q/A 页面，然后我会删除这个。 :-)

标签： javascript arrays input country-codes libphonenumber

【解决方案1】：

您要查找的函数是libphonenumber.getCountries() (documentation)。

我在脚本开头添加了对该函数的调用，其中包含生成国家选项列表的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/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>

我还将var 更改为const。尽可能使用const，如果需要改变（重新分配）变量，请使用let。还有一点，在这一行：

$(this).focus().val('').val(newString);

您无需执行val('')，只需设置新值即可。

【讨论】：

太棒了！它就像一个魅力。谢谢 mil :) 但是，就目前的状态而言，我确实有一个问题要问你，虽然当我输入数字时，它会自动格式化，但如果我要输入一个额外的数字，那么格式就会消失所有的数字将再次打包在一起。有什么可以解决的吗？
恐怕我不知道那个问题的答案，因为我以前从未使用过这个库。我刚刚在getCountries() 通话中走运。也许将其作为一个新问题发布，看看是否有人有任何想法？