帶有國家/地區同步功能的國際電話輸入插件不起作用

Question

我在asp.net Webform網站的電話和移動領域使用intlTelInput 。

目前，我正在使用它作為基本插件，如本例所示

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

現在，我嘗試將其與“國家/地區”下拉列表同步，以便當用戶選擇國家/地區時，它會自動在Web表單上選擇“電話字段和移動”字段，並在電話字段中選擇國家/地區。

我嘗試使用此示例，但它無法正常工作，它破壞了插件或無法正常工作

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 。

我不確定我在哪里做錯了。 我沒有運氣就嘗試了幾件事。

我從數據庫表而不是插件中提取國家/地區下拉列表的數據，所以可能在某處引起問題。 但是國家代碼也匹配。

Answer 1

我解決了問題，似乎與countryCode有關，就像在UpperCase中獲取countryCode一樣，並將其更改為小寫似乎已解決了該問題

工作樣本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>