n/a Change values in one list box based on selection in another

[eluser]shades[/eluser]
here is my controller which gives that $categoryList and $brand list

function add_new()
{
$data['title']="Add Product";
$data['categoryList']=$this->category_model->get_category();
$data['brandList']=$this->brand_model->get_data();
$data['main_content']='product/add';
$this->load->view('template/template',$data);
}

my view is this

<div class="field">
<label for="type">Brand </label>
<select name="brand_id" id="brand_id" class="medium">
<optgroup label="Brand Avilable">
<option value="null" selected="selected">Choose Category</option>
&lt;?php foreach($brandList->result() as $row): ?&gt;
<option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
&lt;?php endforeach; ?&gt;
</optgroup>
</select>
</div>
<div class="field">
<label for="type">Category </label>
<select name="category_id" id="category_id" class="medium">
<optgroup label="Category Avilable">
<option value="null" selected="selected">Choose Category</option>
&lt;?php foreach($categoryList->result() as $row): ?&gt;
<option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
&lt;?php endforeach; ?&gt;
</optgroup>
</select>
</div>

please give me the detail code