从国际电话输入插件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