I have a list of countries and a list of cities for each country. I set both as drop-down list.
My problem is how can I change the cities listed when the selected country changes?
This is my XML code:
<field name="country_id" type="sql" class="country" label="Country"
description="Country" required="true"
query="SELECT id, title FROM #__destination_countries WHERE state = 1"
key_field="id" value_field="title" filter="raw">
</field>
<field name="city_id" type="sql"
query="SELECT id, title FROM #__destination_cities WHERE state = 1"
key_field="id" value_field="title" class="city" label="City"
description="City" required="true" filter="raw">
</field>
Ajax code:
jQuery(document).ready(function($) {
$(".country").change(function(){
country_id = $("#" + this.id).val();
$.ajax({
url:'index.php?option=com_destination&task=cities.getListCities',
type: "POST",
data: {
'country_id': country_id
}
}).done(function(msg) {
console.log(msg);
$(".city").html(msg);
})
})
});
This is my server-side code
public function getListCities()
{
$country_id = JRequest::getInt('country_id', 0);
$model = $this->getModel();
$model->setState('filter.country_id', $country_id);
$items = $model->getItems();
$option = array();
foreach ($items as $key => $item) {
$option[] = "<option value='{$item->id}'>{$item->title}</option>";
}
$return = implode("", $option);
echo $return;
exit;
}
But it did not show as i want, it show like this
<select style="display: none;" required="required" id="jform_city_id" name="jform[city_id]" class="city required chzn-done">
<option value="1">City 1 of Coutry 1</option>
</select>
<div style="width: 220px;" class="chzn-container chzn-container-active" id="jform_city_id_chzn">
<a tabindex="-1" href="javascript:void(0)" class="chzn-single chzn-single-with-drop">
<span>City 1 of Coutry 1</span>
<div><b></b></div>
</a>
<div class="chzn-drop" style="display: block; width: 218px; top: 24px;">
<div class="chzn-search"><input tabindex="-1" style="width: 183px;" autocomplete="off" type="text"></div>
<ul class="chzn-results">
<li id="jform_city_id_chzn_o_0" class="active-result" style="">City 1 of Coutry 1</li>
<li id="jform_city_id_chzn_o_1" class="active-result result-selected" style="">City 2 of Coutry 1</li>
</ul>
</div>
</div>
Just change the select option but did not change the below.
A note apart, you're using the deprecated JRequest::getInt();
where you should be using
$input = JFactory::getApplication()->input;
$country_id = $input->getInt('country_id', 0);
In order to change the second select, you must trigger the update of the second select:
$(".country").change(function(){
// your ajax call from your code
// on success, you need to trigger the second select by using
$(".city_id").val(your_value_from_ajax_response).trigger("liszt:updated");
});