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

工作示例

您正在使用的库（International Telephone Input）会返回国家/地区和拨号代码。如果你想要状态和天意信息，那么你需要从不同的来源提取它。

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

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

});

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

运行代码段尝试

＆＃13;

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

＆＃13;

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

1 个答案:

工作示例