從國際電話輸入插件Javascript中選擇后填充狀態下拉列表

Question

我正在使用本網站提供的國際電話輸入插件： https ： //github.com/Bluefieldscom/intl-tel-input

我現在需要知道的是，當用戶使用國際電話輸入選擇國家時，如何在javascript中使用如何填充我的狀態下拉列表。

這是我的代碼：

<input type="tel" id="country_cellno">
<select name="state" id="state" required="">
    <option>States</option>
</select>

 /*array for States, 63 here is the countrycode*/
    var s_b = new Array();
     s_b[63]= "state1|state2";


    $(document).ready(function() {
    {  

      var countryData =$("#country_cellno").intlTelInput("getSelectedCountryData").dialCode;

      var stateElement = document.getElementById(state);

      stateElement.length = 0; // Fixed by Julian Woods
      stateElement.options[0] = new Option('Service Provider', '');
      stateElement.selectedIndex = 0;

     var state_arr = s_b[countryData].split("|");

     for (var i = 0; i < state_arr.length; i++) {
     stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
}

Answer 1

工作實例

您正在使用的庫（國際電話輸入）返回國家/地區和撥號代碼。 如果您需要狀態和上帝信息，那么您需要從不同的來源提取信息。

第一步是添加事件處理程序以檢測用戶何時選擇國家/地區。 在示例中，它是這樣完成的：

$("#phone").next(".flag-dropdown").click(function() {   
    var country = $("#phone").intlTelInput("getSelectedCountryData").name;
    // do something with the country information

});

然后，該示例向Yahoo YQL發出jsonp請求，以獲取所選國家/地區的狀態列表並填充下拉列表。 然而，可以使用提供信息的任何Web服務。

運行代碼片段以嘗試

 <!DOCTYPE html> <html> <head> <Title>Demo</Title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://jackocnr.com/lib/intl-tel-input/build/css/intlTelInput.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://jackocnr.com/lib/intl-tel-input/build/js/intlTelInput.js"></script> </head> <body style="font-family: arial; font-size: 14px;"> <input id="phone" type="tel"> <select id="states"></select> <script type="text/javascript"> // Initialize $("#phone").intlTelInput({ defaultCountry: "auto", utilsScript: "http://jackocnr.com/lib/intl-tel-input/lib/libphonenumber/build/utils.js" }); // event handler $("#phone").next(".flag-dropdown").click(function() { var country = $("#phone").intlTelInput("getSelectedCountryData").name; country = country.split('(').shift(); // use English country name //console.info( country ); var query = 'select name,woeid from geo.states where place="' + country + '" | sort(field="name")'; var url = ( 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent( query ) + '&format=json&diagnostics=true&callback=?' ); $.getJSON( url, function( data ) { setOptions('#states', data.query.results.place ); }); }); // update dropdown function setOptions( selector, data ) { var $el = $( selector ); $el.empty(); if (!data) return; $.each( data, function( i, obj ) { $el.append($("<option></option>").attr( 'value', obj.name ).text( obj.name )); }); } </script> </body> </html>

從國際電話輸入插件Javascript中選擇后填充狀態下拉列表

問題描述

1 個解決方案

解決方案1
2 已采納 2015-06-04 00:23:30

工作實例

從國際電話輸入插件Javascript中選擇后填充狀態下拉列表

問題描述

1 個解決方案

解決方案1 2 已采納 2015-06-04 00:23:30

工作實例

解決方案1
2 已采納 2015-06-04 00:23:30