2017-01-16 94 views
0

我使用intlTelInput爲電話&移動領域在asp.net webform網站上。國際電話輸入與國家同步插件不工作

目前我使用它作爲一個基本的插件作爲展現在這個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 
      }); 

我現在想將其與國家下拉同步,這樣,當用戶選擇的國家,那麼它會自動選擇電話字段&移動領域的網絡形式與國家在電話領域。

我試圖用這個例子,但它不工作要麼打破插件或者downt工作

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上。

我不知道我在哪裏做錯了。我嘗試了幾件沒有任何運氣的東西。

我從國家下拉數據庫表的數據而不是插件的數據,以便可能導致問題的地方。但國家代碼也匹配。

回答

0

我解決它的問題似乎是與COUNTRYCODE因爲是越來越大寫的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>