How to change a picklist from another using AJAX in Joomla

Question

I have a list of countries and a list of cities for each country. I set both as a dropdown.

My problem is how can I change the cities listed when changing the selected country?

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 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 didn’t show the way I want, it looks 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 selection option, but don't change below.

Answer 1

Note, you are using obsolete JRequest::getInt(); where you should use

 $input = JFactory::getApplication()->input; $country_id = $input->getInt('country_id', 0); 

To change the second selection, you must start the update of the second selection:

 $(".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" ); });