国际电话输入从另一个下拉列表更改下拉拨号代码

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"
);

【讨论】:

以上是关于国际电话输入从另一个下拉列表更改下拉拨号代码的主要内容,如果未能解决你的问题,请参考以下文章

另一个下拉列表的事件更改后刷新剑道下拉列表

从下拉列表中选择值,第二个下拉列表自动更改

使用下拉列表更改列中的所有单元格

extjs 4 如何更改网格上显示的列下拉列表的顺序

powerapps:从另一个数据源填充下拉列表

第一个下拉菜单更改第二个下拉菜单相关项目显示