从 libphonenumber-js 获取所有国家代码并循环

Question

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

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

我现在的问题是如何从库中循环出所有国家代码并将其放入下拉列表中？我尝试使用一些函数，如“getSupportedRegions();”但它说未定义。我已经在 head 中包含了 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>

Answer 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('')，只需设置新值即可。

从 libphonenumber-js 获取所有国家代码并循环

Getting all country codes from libphonenumber-js and looping it out

javascript

arrays

input

country-codes

libphonenumber