I have 2 drop down select boxes, one of which you select your country from the list and the next drop down should populate the respective state or region. For some reason, the 'state/region' field will not show any of the options based on what was selected from the first drop down box, the 'country' field.
I did have it working at one point, tried to revert back the way I had the code originally but I can't get it to work anymore. Any solutions out there?
Here is my HTML code --------------->
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// when any option from country list is selected
jQuery("select[name='Country']").change(function(){
// get the selected option value of country
var optionValue = jQuery("select[name='Country']").val();
/**
* pass country value through GET method as query string
* the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
* if we get response from data.php, then only the cityAjax div is displayed
* otherwise the cityAjax div remains hidden
* 'beforeSend' is used to display loader image
* 'complete' is used to hide the loader image
*/
jQuery.ajax({
type: "GET",
url: "country-state-data.php",
data: {
Country: optionValue,
status: 1
},
beforeSend: function(){ jQuery("#ajaxLoader").show(); },
complete: function(){ jQuery("#ajaxLoader").hide(); },
success: function(response){
jQuery("#cityAjax").html(response);
jQuery("#cityAjax").show();
}
});
});
});
</script>
<?php
?>
<select name="Country" id="country">
<option value="">-Country-</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
<option value="New Zealand">New Zealand</option>
<option value="South Africa">South Africa</option>
</select>
<div id="ajaxLoader" style="display:none"><img src="../ajax-loader.gif" alt="loading..."></div>
<div id="cityAjax" style="display:none">
<select name="State" id="state">
<option value="">-State/Region-</option>
</select>
</div>
<br>
<input type="hidden" name="tempt" id="tempt" value="http://" />
<input type="hidden" name="tempt2" id="tempt2" class="clear" value="" />
<button class="button2" ontouchstart="('touchstart');">SUBSCRIBE</button>
</form>
</section>
Here is the php --------------->
<?php
$country = $_GET['Country'];
if(!$country) {
return false;
}
$cities = array(
1 => array('Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'),
2 => array('Avon', 'Bedfordshire', 'Berkshire', 'Buckinghamshire', 'Cambridgeshire', 'Cheshire', 'Cleveland', 'Cornwall', 'Cumbria', 'Derbyshire', 'Devon', 'Dorset', 'Durham', 'East Sussex', 'Essex', 'Gloucestershire', 'Hampshire', 'Herefordshire', 'Isle of Wight', 'Kent', 'Lancashire', 'Leicestershire', 'Lincolnshire', 'London', 'Merseyside', 'Middlesex', 'Norfolk', 'Northhamptonshire', 'Northumberland', 'North Humberside', 'North Yorkshire', 'Nottinghamshire', 'Oxfordshire', 'Rutland', 'Shropshire', 'Somerset', 'South Humberside', 'South Yorkshire', 'Staffordshire', 'Suffolk', 'Surrey', 'Tyne and Wear', 'Warwickshire', 'West Midlands', 'West Sussex', 'West Yorkshire', 'Wiltshire', 'Worcestershire'),
3 => array('Alberta', 'British Columbia', 'Manitoba', 'New Brunswick', 'New Foundland and Labrador', 'Northwest Territories', 'Nova Scotia', 'Nunavut', 'Ontario', 'Prince Edward Island', 'Quebec', 'Saskatchewan', 'Yukon Territory'),
4 => array('Australian Capital Territory', 'New South Wales', 'Northern Territory', 'Queensland', 'South Australia', 'Tasmania', 'Victoria', 'Western Australia'),
5 => array('Acre', 'Alagoas', 'Amapa', 'Amazonas', 'Bahia', 'Ceara', 'Distrito Federal', 'Espirito Santo', 'Goias', 'Maranhao', 'Mato Grosso', 'Mato Grosso do Sul', 'Minas Gerais', 'Para', 'Paraiba', 'Parana', 'Pernambuco', 'Piaui', 'Rio de Janeiro', 'Rio Grande do Norte', 'Rio Grande do Sul', 'Rondonia', 'Roraima', 'Santa Catarina', 'Sao Paulo', 'Sergipe', 'Tocantins'),
6 => array('Alsace', 'Aquitaine', 'Auvergne', 'Brittany', 'Burgundy', 'Centre', 'Champagne-Ardenne', 'Franche-Comte', 'Ile-de-France', 'Languedoc-Roussillon', 'Limousin', 'Lorraine', 'Lower Normandy', 'Midi-Pyrenees', 'Nord-Pas-de-Calais', 'Pays de la Loire', 'Picardy', 'Poitou-Charentes', 'Provence-Alpes-Cote d\'Azur', 'Rhone-Alpes', 'Upper Normandy', 'Corsica', 'French Guiana', 'Guadeloupe', 'Martinique', 'Mayotte', 'Reunion'),
7 => array('Abruzzo', 'Aosta Valley', 'Apulia', 'Basilicata', 'Calabria', 'Campania', 'Emilia-Romagna', 'Friuli-Venezia Giulia', 'Lazio', 'Liguria', 'Lombardy', 'Marche', 'Molise', 'Piedmont', 'Sardinia', 'Sicily', 'Trentino-Alto Adige/Sudtirol', 'Tuscany', 'Umbria', 'Veneto'),
8 => array('Auckland', 'Bay of Plenty', 'Canterbury', 'Gisborne', 'Hawke\'s Bay', 'Manawatu-Whanganui', 'Marlborough', 'Nelson', 'Northland', 'Otago', 'Southland', 'Taranaki', 'Tasman', 'Waikato', 'Wellington', 'West Coast'),
9 => array('Eastern Cape', 'Free State', 'Gauteng', 'KwaZulu-Natal', 'Limpopo', 'Mpumalanga', 'North West', 'Northern Cape', 'Western Cape'),
);
$currentCities = $cities[$country];
?>
<select name="State" id="state">
<option value="">-State/Region-</option>
<?php
foreach($currentCities as $state) {
?>
<option value="<?php echo $state; ?>"><?php echo $state; ?></option>
<?php
}
?>
</select>