100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Example: Country sync</title>
|
|
<link rel="stylesheet" href="../css/prism.css">
|
|
<link rel="stylesheet" href="../../build/css/intlTelInput-1400377268998.css">
|
|
<link rel="stylesheet" href="../../build/css/demo-1400377268998.css">
|
|
|
|
<link rel="stylesheet" href="../css/countrySync-1400377268998.css">
|
|
|
|
|
|
<!-- GOOGLE ANALYTICS -->
|
|
<script>
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-26178728-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
<!-- /GOOGLE ANALYTICS -->
|
|
</head>
|
|
|
|
<body>
|
|
<a href="../../../../intl-tel-input.html">Back</a>
|
|
<h1>Example: Country sync</h1>
|
|
<p>Use static getCountryData method to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync.</p>
|
|
|
|
<h2>Markup</h2>
|
|
<pre><code class="language-markup"><div class="form-item">
|
|
<label>Telephone number</label>
|
|
<input id="phone" type="tel" placeholder="e.g. +1 702 123 4567">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label>Address</label>
|
|
<input type="text" placeholder="House name/number">
|
|
<input type="text" placeholder="City">
|
|
<input type="text" placeholder="State">
|
|
<input type="text" placeholder="Zip code">
|
|
<select id="address-country"></select>
|
|
</div></code></pre>
|
|
|
|
<h2>Code</h2>
|
|
<pre><code class="language-javascript">// get the country data from the plugin
|
|
var countryData = $.fn.intlTelInput.getCountryData(),
|
|
telInput = $("#phone"),
|
|
addressDropdown = $("#address-country");
|
|
|
|
// init plugin
|
|
telInput.intlTelInput();
|
|
|
|
// populate the country dropdown
|
|
$.each(countryData, function(i, country) {
|
|
addressDropdown.append($("<option></option>").attr("value", country.iso2).text(country.name));
|
|
});
|
|
|
|
// listen to the telephone input for changes
|
|
telInput.change(function() {
|
|
var countryCode = telInput.intlTelInput("getSelectedCountryData").iso2;
|
|
addressDropdown.val(countryCode);
|
|
});
|
|
|
|
// trigger a fake "change" event now, to trigger an initial sync
|
|
telInput.change();
|
|
|
|
// listen to the address dropdown for changes
|
|
addressDropdown.change(function() {
|
|
var countryCode = $(this).val();
|
|
telInput.intlTelInput("selectCountry", countryCode);
|
|
});
|
|
</code></pre>
|
|
|
|
<h2>Result</h2>
|
|
<div id="result">
|
|
<div class="form-item">
|
|
<label>Telephone number</label>
|
|
<input id="phone" type="tel" placeholder="e.g. +1 702 123 4567">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label>Address</label>
|
|
<input type="text" placeholder="House name/number">
|
|
<input type="text" placeholder="City">
|
|
<input type="text" placeholder="State">
|
|
<input type="text" placeholder="Zip code">
|
|
<select id="address-country"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/prism.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="../../build/js/intlTelInput.js?1400377268998"></script>
|
|
<script src="../js/countrySync.js?1400377268998"></script>
|
|
</body>
|
|
</html>
|
|
<!-- Localized --> |