[英]Intl tel input change dropdown dialcode from another dropdown
Trying to resolve issue using intl tel input plugin. 尝试使用国际电话输入插件解决问题。
Based on this example https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html , The #phone flag and #country text is changing vice versa but I would like the dialcode to change on the phone number field, also sometimes the flags overlap eachother, any help? 根据此示例https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html,#phone标志和#country文本反之亦然,但我想更改电话号码字段上的拨号代码,有时标志彼此重叠,有什么帮助吗? thanks
谢谢
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);
});
Nevermind, my bad, called the init twice. 没关系,我很糟糕,两次调用了init。
Initialisation here: 在这里初始化:
var iti = window.intlTelInput(input, {
utilsScript: "assets/js/utils.js",
initialCountry: "jp",
separateDialCode: true,
customContainer: "col-md-12 no-padding intelinput-styles",
});
Remove this: 删除此:
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"
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.