Question

I have 3 selects on a page, the 2nd and 3rd select should populate with options depending on the value selected in the first select.
For instance: the first select has a list of countries, if I select country A from this select, the 2nd select will populate with cities from this country, the 3rd select populates with, i don’t know, most popular names in the country.

I want to realize this with AJAX, but because the site is written with the use of Smarty, I’m having a hard time.
Each select is populated by an array which is assigned from a php. I would like to somehow change the values of the 2nd and 3rd array, without reloading the page, depending on an id I get from the 1st select.

I tried requesting the page that assigns the values to smarty and tried changing the arrays but it didn’t work in the frontend.
Any ideas?

EDIT:
The code looks something like this:

$countries = Country::getCountries();
$cities = City::getCities($country_id); //the parameter is not necessary 
$names = Name::getNames($country_id); //the parameter is not necessary 

$smarty->assign("countries",$countrires);
$smarty->assign("cities",$cities);
$smarty->assign("names",$names);
//display template etc

on the template page

<select name="countries">
{foreach from=$countries item=country}
   <option value="{$country.id}">{$country.name}</option>
{/foreach}
</select>

and the 2 other selects look the same.

Answer 1

It would certainly help to see the code for this, but I’ll briefly describe the process that you should probably be taking:

(1) Set-up the cities page exactly as you’d set-up any other within whatever framework you may or may not be using.

(2) The output template for the cities page should look something like this (no header or includes):


{foreach $cities as $city}
<option value="{$city.id}">{$city.name}</option>
{/foreach}


(3) The cities page must be able to accept some parameter for specifying what country we should select cities for, for example, with a GET variable.

(4) The AJAX call should request the url (for example, /cities?country=USA) with a callback to replace the innerHTML of the cities select element with the response.

(5) There is no step 5.