国际电话输入从另一个下拉列表更改下拉拨号代码
Posted
技术标签:
【中文标题】国际电话输入从另一个下拉列表更改下拉拨号代码【英文标题】:Intl tel input change dropdown dialcode from another dropdown 【发布时间】:2019-12-15 18:48:01 【问题描述】:尝试使用国际电话输入插件解决问题。
基于此示例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);
);
【问题讨论】:
【参考方案1】:没关系,我的错,调用了两次初始化。
在这里初始化:
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"
);
【讨论】:
以上是关于国际电话输入从另一个下拉列表更改下拉拨号代码的主要内容,如果未能解决你的问题,请参考以下文章