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

Populate State Dropdown after selecting from International Telephone Input plugin Javascript

本文关键字：填充 状态 选择 电话 输入 Javascript 插件      更新时间：2023-09-26

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

工作示例

您正在使用的库(国际电话输入)返回国家和拨号代码。如果你想要州和普罗维登斯的信息，那么你需要从不同的来源获取。

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

$("#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>

相关文章：