Execute dropdown state state after selection from International Telephone Input Javascript plugin
I am using the International Telephone Input plugin provided by this site: https://github.com/Bluefieldscom/intl-tel-input
Now I need to know if there is a way in javascript how I can populate the State dropdown when the user selects a country using the international phone 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]);
}
source to share
Working example
The library you are using ( International Dialing ) returns the countries and dialing codes. If you want information about condition and providence, you will need to extract it from another source.
The first step is to add an event handler to detect when the user selects a country. The example does this as follows:
$("#phone").next(".flag-dropdown").click(function() {
var country = $("#phone").intlTelInput("getSelectedCountryData").name;
// do something with the country information
});
The example then sends a jsonp Yahoo YQL request to get the list of states for the selected country and populate the dropdown. However, any web service that provides information can 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>
source to share