I use this code:
var selected = {
country_id: <?php echo (int)$country_id;?>,
state_id: <?php echo (int)$state_id;?>,
city_id: <?php echo (int)$city_id;?>
},
countryMap = '<?php echo $countryMap;?>',
stateMap = '<?php echo $stateMap;?>',
cityMap = '<?php echo $cityMap;?>';
$("select.event-shipping-country").off().on("change", function() {
var $self = $(this);
if(!$self.val()) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
}
countryMap = cityMap = stateMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
data: { id: $self.val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
selected.country_id = $self.val();
if(!result.length)
{
$("select.event-shipping-state").change();
return;
}
countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
var html = '';
for(var idx in result)
html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-state").append(html);
},
type: 'POST'
});
});
$("select.event-shipping-state").off().on("change", function() {
var $self = $(this);
cityMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'city', 'action' => 'get-cities' ], 'shipping_c_a') ?>',
data: { state: $self.val(), country: $("select.event-shipping-country").val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-city").find("option:gt(0)").remove();
selected.state_id = $self.val();
if(!result.length)
{
return;
}
var html = '';
for(var idx in result)
html += '<option ' + (selected.city_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-city").append(html);
stateMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
},
type: 'POST'
});
stateMap = $self.val() ? $self.text() : '';
});
$("select.event-shipping-city").off().on("change", function() {
selected.city_id = $(this).val();
cityMap = $(this).val() ? $(this).find('option[value="' + $(this).val() + '"]').text() : '';
});
This function select states based on selected country. Problem is that I have only one country with ID 117. But even if I have only one default option selected I must select it again to and only than will show states, but I need that states loads on page loading by selecting country id 117.
Thank you.