CODEWITHSUNDEEP
javascripthtmlarrays
Gjed
Gjed

Reputation: 27

Populate State Dropdown after selecting from International Telephone Input plugin Javascript

I am using International Telephone Input plugin provided by this site: https://github.com/Bluefieldscom/intl-tel-input

What I need now is to know if there's a way in javascript on how can I populate my State dropdown when a user selects a country using the International Telephone Input.

here's my code:

<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]);
}

Upvotes: 3

Views: 1564

Answers (1)

Yogi
Yogi

Reputation: 7184

Working Example

The library that you are using (International Telephone Input) returns countries and dialing codes. If you want state and providence information then you will need to pull that from a different source.

The first step is to add an event handler to detect when the user selects a country. In the example it is done like this:

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

});

The example then makes a jsonp request to Yahoo YQL to get a list of states for the selected country and populate a dropdown. Yet, any web service supplying the information could be used.

Run the Code Snippet to Try 

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

Upvotes: 2

Related Questions