Dynamic chained select menus

[eluser]n0xie[/eluser]
A bit of code to get you started. Untested but should give you some ideas:

Code:

// js
    $('#manufacturer').change(function () {
        var id = $('#manufacturer option:selected').attr('value');
        $.post("/ajax/getModels", {manufacturer_id: id}, function (data) {
          if (data) {
            $('select#model').html(data);
            $('select#model').show();
          }
        });
    });

// html
<div><div class="label">Manufacturer:</div>
    <select name="manufacturer" id="manufacturer">
        <option value="-">-</option>
        &lt;?php foreach($manufacturers as $item) : ?&gt;
        <option value="&lt;?php echo $item['id']?&gt;">&lt;?php echo $item['name']?&gt;</option>
        &lt;?php endforeach; ?&gt;
    </select></div>

    <div><div class="label">Model:</div>
        <select name="model" id="model" style="display:none">
          <option></option>
        </select></div>

// ajax controller
function getModels()
{
  $id = $this->input->post('manufacturer_id');
  $data = $this->vehicles->getModels($id); // change model with a where clause
  // this should probably be in a view
  $html = '<option value="-">-</option>';
  foreach($models as $item)
  {
    $html .= '<option value="'.$item['id'].'">'.$item['name'].'</option>';
  }
  echo $thml
}