带有国家/地区同步功能的国际电话输入插件无法正常工作
International Telephone Input with Country sync for plugin not working
我在 asp.net 网络表单网站上使用 intlTelInput 作为电话和移动字段。
目前我将它用作基本插件,如图所示 example
var input = $("#ContentPlaceHolder1_txtPhone"), output = $("#output");
var country = $("#ContentPlaceHolder1_ddCountry");
input.intlTelInput({
preferredCountries: ['ae'],
autoHideDialCode: true,
nationalMode: false,
utilsScript: "../../Scripts/phone/js/utils.js" // just for formatting/placeholders etc
});
现在我正在尝试将其与国家/地区下拉列表同步,以便当用户 select 国家/地区时,它会自动 select 网络表单上的电话字段和移动字段与国家/地区在电话领域。
我尝试使用此示例,但它无法正常工作,要么破坏了插件,要么无法正常工作
http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html
我试过的代码
var countryData = $.fn.intlTelInput.getCountryData(),
telInput = $("#ContentPlaceHolder1_txtPhone"),
addressDropdown = $("#ContentPlaceHolder1_ddCountry");
// set it's initial value
//var initialCountry = telInput.intlTelInput("getSelectedCountryData").iso2;
//addressDropdown.val(initialCountry);
// listen to the telephone input for changes
telInput.on("countrychange", function (e, countryData) {
addressDropdown.val(countryData.iso2);
});
// listen to the address dropdown for changes
addressDropdown.change(function () {
telInput.intlTelInput("setCountry", $(this).val());
});
我在 codepen 上放置了代码 http://codepen.io/anon/pen/wgzppg。
我不确定我哪里做错了。我尝试了一些东西但没有任何运气。
我从数据库 table 中提取国家/地区下拉列表的数据,而不是从插件中提取数据,因此这可能会在某处引起问题。但国家代码也匹配。
我解决了这个问题似乎与国家代码有关,因为在大写中获取国家代码并将其更改为小写似乎已经解决了问题
工作样本http://codepen.io/anon/pen/BpLJEZ?editors=1010
<div class="col-xs-12 col-sm-12 col-md-6">
<label class="cf-label">Country*</label>
<select name="ctl00$ContentPlaceHolder1$ddCountry" id="ContentPlaceHolder1_ddCountry" class="form-control ddCountry styled-select">
<option value="af">Afghanistan</option>
<option value="ax">Åland Islands</option>
<option value="al">Albania</option>
<option value="dz">Algeria</option>
<option value="as">American Samoa</option>
<option value="ad">Andorra</option>
<option value="ao">Angola</option>
<option value="ai">Anguilla</option>
<option value="aq">Antarctica</option>
<option value="ag">Antigua And Barbuda</option>
<option value="ar">Argentina</option>
<option value="am">Armenia</option>
<option value="aw">Aruba</option>
<option value="au">Australia</option>
<option value="at">Austria</option>
<option value="az">Azerbaijan</option>
<option value="bs">Bahamas</option>
<option value="bh">Bahrain</option>
<option value="bd">Bangladesh</option>
</select>
<span data-val-controltovalidate="ContentPlaceHolder1_ddCountry" data-val-errormessage="*" data-val-display="Dynamic" data-val-validationgroup="vgDonationtForm" id="ContentPlaceHolder1_rfCountry" class="CssValidator" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="-- Select --" style="display:none;">*</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<label class="label">Mobile Number *</label>
<input name="ctl00$ContentPlaceHolder1$txtPhone" id="ContentPlaceHolder1_txtPhone" class="rg-txt rg-phone-txt form-control cf-input" autocomplete="off" placeholder="+971 50 123 4567" type="text">
</div>
我在 asp.net 网络表单网站上使用 intlTelInput 作为电话和移动字段。
目前我将它用作基本插件,如图所示 example
var input = $("#ContentPlaceHolder1_txtPhone"), output = $("#output");
var country = $("#ContentPlaceHolder1_ddCountry");
input.intlTelInput({
preferredCountries: ['ae'],
autoHideDialCode: true,
nationalMode: false,
utilsScript: "../../Scripts/phone/js/utils.js" // just for formatting/placeholders etc
});
现在我正在尝试将其与国家/地区下拉列表同步,以便当用户 select 国家/地区时,它会自动 select 网络表单上的电话字段和移动字段与国家/地区在电话领域。
我尝试使用此示例,但它无法正常工作,要么破坏了插件,要么无法正常工作
http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html
我试过的代码
var countryData = $.fn.intlTelInput.getCountryData(),
telInput = $("#ContentPlaceHolder1_txtPhone"),
addressDropdown = $("#ContentPlaceHolder1_ddCountry");
// set it's initial value
//var initialCountry = telInput.intlTelInput("getSelectedCountryData").iso2;
//addressDropdown.val(initialCountry);
// listen to the telephone input for changes
telInput.on("countrychange", function (e, countryData) {
addressDropdown.val(countryData.iso2);
});
// listen to the address dropdown for changes
addressDropdown.change(function () {
telInput.intlTelInput("setCountry", $(this).val());
});
我在 codepen 上放置了代码 http://codepen.io/anon/pen/wgzppg。
我不确定我哪里做错了。我尝试了一些东西但没有任何运气。
我从数据库 table 中提取国家/地区下拉列表的数据,而不是从插件中提取数据,因此这可能会在某处引起问题。但国家代码也匹配。
我解决了这个问题似乎与国家代码有关,因为在大写中获取国家代码并将其更改为小写似乎已经解决了问题
工作样本http://codepen.io/anon/pen/BpLJEZ?editors=1010
<div class="col-xs-12 col-sm-12 col-md-6">
<label class="cf-label">Country*</label>
<select name="ctl00$ContentPlaceHolder1$ddCountry" id="ContentPlaceHolder1_ddCountry" class="form-control ddCountry styled-select">
<option value="af">Afghanistan</option>
<option value="ax">Åland Islands</option>
<option value="al">Albania</option>
<option value="dz">Algeria</option>
<option value="as">American Samoa</option>
<option value="ad">Andorra</option>
<option value="ao">Angola</option>
<option value="ai">Anguilla</option>
<option value="aq">Antarctica</option>
<option value="ag">Antigua And Barbuda</option>
<option value="ar">Argentina</option>
<option value="am">Armenia</option>
<option value="aw">Aruba</option>
<option value="au">Australia</option>
<option value="at">Austria</option>
<option value="az">Azerbaijan</option>
<option value="bs">Bahamas</option>
<option value="bh">Bahrain</option>
<option value="bd">Bangladesh</option>
</select>
<span data-val-controltovalidate="ContentPlaceHolder1_ddCountry" data-val-errormessage="*" data-val-display="Dynamic" data-val-validationgroup="vgDonationtForm" id="ContentPlaceHolder1_rfCountry" class="CssValidator" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="-- Select --" style="display:none;">*</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<label class="label">Mobile Number *</label>
<input name="ctl00$ContentPlaceHolder1$txtPhone" id="ContentPlaceHolder1_txtPhone" class="rg-txt rg-phone-txt form-control cf-input" autocomplete="off" placeholder="+971 50 123 4567" type="text">
</div>