如何将iso2变量值存入intlTelInput的preferredCountries数组？

嘿，这事儿其实挺简单的，核心就是利用intlTelInput自带的update方法来动态修改配置。下面是具体的实现思路和修改后的完整代码：

实现思路 #

1. 在countrychange事件回调里拿到选中国家的iso2值后，调用组件的update方法，把preferredCountries数组更新为包含当前iso2的数组。
2. 初始化时的preferredCountries可以先设为空数组，后续通过事件触发动态覆盖就行。

修改后的完整代码 #

// 先初始化intlTelInput组件
$("#demo").intlTelInput({ 
    allowDropdown: true, 
    autoHideDialCode: false, 
    autoPlaceholder: "off", 
    dropdownContainer: "body", 
    formatOnDisplay: false, 
    geoIpLookup: function(callback) { 
        $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) { 
            var countryCode = (resp && resp.country) ? resp.country : ""; 
            callback(countryCode); 
        }); 
    }, 
    hiddenInput: "full_number", 
    initialCountry: "auto", 
    nationalMode: false, 
    placeholderNumberType: "MOBILE", 
    preferredCountries: [], // 初始为空数组，后续动态更新
    separateDialCode: false, 
    utilsScript: "intl-tel-input-master/build/js/utils.js" 
});

// 监听countrychange事件，更新preferredCountries数组
$("#demo").on("countrychange", function(e, countryData) { 
    var name = countryData.name; 
    var cod = countryData.dialCode; 
    var iso2 = countryData.iso2; 
    // 关键步骤：调用update方法修改preferredCountries配置
    $("#demo").intlTelInput("update", {
        preferredCountries: [iso2]
    });
});

关键点说明 #

• intlTelInput("update", options)是组件官方提供的动态更新配置的方法，只需要传入要修改的preferredCountries即可，其他原有配置会保持不变。
• 这样每次切换国家时，preferredCountries数组都会被替换为当前选中国家的iso2值，下次打开下拉菜单时，这个国家会被优先展示在顶部区域。

内容的提问来源于stack exchange，提问作者kam