从国际电话输入插件 Javascript 中选择后填充状态下拉列表答案

【问题标题】：Populate State Dropdown after selecting from International Telephone Input plugin Javascript从国际电话输入插件 Javascript 中选择后填充状态下拉列表
【发布时间】：2015-06-03 14:06:14
【问题描述】：

我正在使用本网站提供的国际电话输入法插件： 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]);
}

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

工作示例

您正在使用的库 (International Telephone Input) 返回国家和拨号代码。如果您需要状态和天意信息，则需要从其他来源获取。

第一步是添加一个事件处理程序来检测用户何时选择了一个国家。在示例中是这样完成的：

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

});

然后该示例向Yahoo YQL 发出一个jsonp 请求，以获取所选国家/地区的州列表并填充下拉列表。然而，可以使用任何提供信息的网络服务。

运行代码片段来尝试

<!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>

【讨论】：

您好，谢谢！但是有什么方法可以将它连接到状态数组？
在新版本的国际电话输入标记发生了变化，所以我们需要像这样搜索$("#phone").prev().find(".country-list").click(function() { var country = $("#phone").intlTelInput("getSelectedCountryData").name; });
@ohmyfgod - Tx 用于更新其他用户的更改。