Populate State Dropdown after selecting from International Telephone Input plugin Javascript
Question
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]);
}
1 answers
solution1
2 ACCPTED 2015-06-04 00:23:30
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.