How to pass an associative array from smarty templates to jquery

I have assigned two arrays in selection.php to smarty like this

$country = array(
         '1' => 'Japan',
         '2' => 'Australia',
         '3' => 'India'
            );      
$city = array(
            '1' => array(
                 '10' => 'Tokyo',
                 '11' => 'Osaka'
               ),
        '2' => array(
                 '20' => 'Sydney',
                 '21' => 'Melbourne'
               ),
        '3' => array(
                 '30' => 'Mumbai',
                 '31' => 'Delhi'
               )
        );      
$smarty->assign('country_select',$country);
$smarty->assign('city_select',$city);
$smarty->display('selection.tpl');

The code in selection.tpl looks like this.

<div>{html_options id='country_select' options=$country_select}</div>
<div>{html_options id='city_select' options=$city_select}</div>

Now what I want to do is, write a jQuery function that when I select a country in country_select drop-down, the items in the city_select drop-down will be changed in accordance with the country selection. Means, if I select 'Australia' in the country_select drop-down, in the city-select drop-down except 'Sydney' and 'Melbourne' other options will be removed.

Can you please help me how the jQuery code will be. I have been failed to pass the $city_select array to jQuery.

Solution

$country = array('1' => 'Japan', '2' => 'Australia', '3' => 'India');    
$city = array(
    '1' => array('10' => 'Tokyo', '11' => 'Osaka'),
    '2' => array('20' => 'Sydney', '21' => 'Melbourne'),
    '3' => array('30' => 'Mumbai', '31' => 'Delhi')
);
$data = array('countries' => $country, 'cities' => $city);

echo json_encode($data);

Use json_encode to echo the output to JSON, the result should look like this:

{"countries":{"1":"Japan","2":"Australia","3":"India"},"cities":{"1":{"10":"Tokyo","11":"Osaka"},"2":{"20":"Sydney","21":"Melbourne"},"3":{"30":"Mumbai","31":"Delhi"}}}

Then you should use jQuery ajax to fetch your PHP and using JSON to communicate

$.get("selection.php", function(result) {
    //code here
}, "json");

I wrote an example code on Fiddle, the javascript should put into the middle of above jQuery AJAX. http://jsfiddle.net/sing0920/X3dvG/

Hope this help.

oops, I found out I totally ignore "smarty" here, sorry for that. But still hope this can help you.