Jquery with SMARTY and JSON

I can help with the concept and algorithm:

1. Display the department dropdown and add a jquery to handle change event.
2. Load only JSON data for categories is good, but sometimes it will not work in IE and safari. One of robust way to do it is load a complete select with AJAX, then replace the existing category dropdown.

jQuery(function($){  $('#department').change( function() {    var departmentVal = $(this).val();    var cat_parent =  $("#category").parent();    cat_parent.html("Loading...");    $.get("category_select.php",          {departmentId: departmentVal},          function(data){            cat_parent.html(data);          })  });});

category_select.php will need to return data with format:

<select id="category">  <option>...</option></select>

Make sure you put the category select inside a parent that have no other children:

<span>  <select id="category">    <option>Select a department first</option>  </select></span>

This method will working in latest IE, Safari, Google Chrome, and Firefox.

You should be able to implement this with jQuery Smarty with it's auto_update modifier.http://www.balupton.com/sandbox/jquery-smarty/demo/