Changing smarty variable's value with AJAX; multiple selects

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->ass开发者_StackOverflow社区ign("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.

---

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.

---

The countries select called a function, which did the following:

function updateSelect(){     
 var country_id = document.getElementById("country_id").value;
 ajax.requestFile = 'ajax.php?country_id='+sec_id;
 ajax.onCompletion = todo;
 ajax.runAJAX();
}

function todo(){
 var value = eval(ajax.response);
 document.getElementById('city_tr').style.display = 'table-row';
 if (value !=undefined) document.getElementById('td_city').innerHTML = value ;
             else document.getElementById('city_tr').style.display = 'none';
}

the ajax.php script echoed a select generated based on the id it got.