Populating a second dropbox when the first one changes

Populating a second dropbox when the first one changes

I am programing a jquery routine that ought populate a second dropbox when the first one change. 

The event. Change in the first dropbox works correctly and detect when we select a diferent  value. 
When a change occurs it invokes a PHP function (codeigniter) . This function is invoked correctly and generates the oupout as expected.

The point is that this output ought to be used to populated a second dropbox and it is not happening.

I'd like to know if someone can review the attacjed code and let me know what is wrong.

Thanks,

SCRIPT

<script type="text/javascript">
$(document).ready(function () {
$('#id_estado').change(function () {
var estado = $(this).attr('value');
$.ajax({  
url: "controlador_principal/buscar_municipios/"+estado,  
async: false, 
type: "POST",  
dataType: "html",  
success: function(data) {
$("#id_municipio").html(data);
}
});
});
});
</script>

PHP CODEIGNITER CODE

function buscar_municipios (){
$estado=$this->uri->segment(3);
                  .....        
                  .....        
                  .....        
                  .....        
if ($query->num_rows() > 0)
{
foreach ($result as $row)
{
$resultado.=  "<option value='".$row->co_municipio."'>".$row->nb_municipio."</option>";
//$resultado.= "<option value='".$row['co_municipio']."' selected>".$row['nb_municipio']."</option>";
}
}
$resultado.="</select>";
return $resultado;
}

CONTENTS OF $resultado

<select name="co_municipio">
<option value="" selected="selected">Seleccione un municipio</option>
<option value="29">Example mun 1</option>
<option value="30">Example mun 2</option>
<option value="31">Example mun 3</option>
<option value="50">Example mun 4</option>
<option value="51">Example mun 5</option>
<option value="52">Example mun 6</option>
</select>

HTML

<table width="554px" border="0" align="center">
 <tr valign="top">
<td colspan="4">&nbsp;</td>
</tr>
 <tr valign="top">
<td width="88px">Estado <span class="required">*</span></td>
<td width="196px">
<span class="required">
<?php echo form_dropdown('co_estado', $estados, set_value('co_estado'), 'id="id_estado"')?><br /></center></td>
</span>
</td>
<td width="88px">Municipio <span class="required">*</span></td>
<td width="196px">
<id=" id_municipio "></id>   <!-- This is the ID that ought to be updated when the first one changes -->
</td>
 </tr>
</table>