來自另一個下拉菜單的國際電話輸入更改下拉菜單撥號代碼

Question

嘗試使用國際電話輸入插件解決問題。

根據此示例https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html，#phone標志和#country文本反之亦然，但我想更改電話號碼字段上的撥號代碼，有時標志彼此重疊，有什么幫助嗎？ 謝謝

var countryData = window.intlTelInputGlobals.getCountryData(),
input = document.querySelector("#phone"),
countryDropdown = document.querySelector("#country");

intlTelInput(input, {
    allowDropdown: true,
    autoHideDialCode: false,
    autoPlaceholder: "off",
    dropdownContainer: document.body,
    preferredCountries: ['jp'],
    separateDialCode: true,
    customContainer: "col-md-12 no-padding intelinput-styles",
    //utilsScript: "assets/js/utils.js"
});


var iti = intlTelInput(input, {
    utilsScript: "./utils.js" 
});

for (var i = 0; i < countryData.length; i++) {
    var country = countryData[i];
    var optionNode = document.createElement("option");
    optionNode.value = country.iso2;
    var textNode = document.createTextNode(country.name);
    optionNode.appendChild(textNode);
    countryDropdown.appendChild(optionNode);
}


input.addEventListener('countrychange', function(e) {
    countryDropdown.value = iti.getSelectedCountryData().iso2;
});

countryDropdown.addEventListener('change', function() {
    iti.setCountry(this.value);
});

Answer 1

沒關系，我很糟糕，兩次調用了init。

在這里初始化：

 var iti = window.intlTelInput(input, {
    utilsScript: "assets/js/utils.js",
    initialCountry: "jp",   
    separateDialCode: true,
    customContainer: "col-md-12 no-padding intelinput-styles",
});

刪除此：

intlTelInput(input, {
    allowDropdown: true,
    autoHideDialCode: false,
    autoPlaceholder: "off",
    dropdownContainer: document.body,
    preferredCountries: ['jp'],
    separateDialCode: true,
    customContainer: "col-md-12 no-padding intelinput-styles",
    //utilsScript: "assets/js/utils.js"
});