How to fill depending dropdowns with jQuery and JSON? - php

Question

I have two dropdowns where the second one (#second) is dependent to the first dropdown (#first). Everytime that #first changes a request is made to the server to get the #second's options.
When I manually select a value of #first there is no problem, the problem is when I use jQuery to fill the form's data. I assign the json's data to corresponding form controls. When I assign the value to #first then I use $("#first").trigger('change') and then I try to assign the value to #second once its options have been loaded.
It seems jQuery tries to assign the value to #second before its options are loaded.
HTML:
<div class="form-group">
<div class="row">
<label for="desCa" class="control-label col-md-2">DES</label>
<div class="col-md-4">
<select name="desCa" id="first" class="form-control">
<option value="">Seleccione</option>
<!-- Incluir catálogo de DES -->
<?php $des=c atalogos( "des"); foreach($des as $des) { echo '<option value="'.$des[ 'idDes']. '">'.$des[ 'descripcion']. '</option>'; } ?>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="entidadCa" class="control-label col-md-2">Entidad</label>
<div class="col-md-4">
<select name="entidadCa" id="second" class="form-control">
<option value="">Seleccione una DES</option>
<!-- Incluir catálogo de Entidades -->
</select>
</div>
</div>
</div>
When #first changes:
$("#first").on('change', function(){
var des = $(this).val();
var get_dependencias = $.get(base_url+'dsac/catalogos.php', {cat: 'dependencias', des: des});
get_dependencias.done(function(dependencias){
if (dependencias.length > 0) {
$("#second").empty();
$.each(dependencias, function(key, dependencia){
$("#second").append('<option value="'+ dependencia['id'] + '">' + dependencia['descripcion'] + '</option>');
});
} else {
$("#second").html('<option value="-1">Seleccione una DES</option>');
}
});
});
Where the problem is:
$.post(base_url+'dsac/cuerpoacademico/buscar.php', {clave: clave})
.done(function(xhr){
var data = $.parseJSON(xhr);
if(data.msgID === 1){
alert(data.msg);
} else {
llenarFormCA(data);
}
});
function llenarFormCA(data){ //data is in JSON format
var pane2 = '#pane2';
//Here a #first option is selected so I trigger change event in order to load #second options.
$(pane2 + " #first").val(data.campo5).trigger('change');
//Altough #second options are loaded, always the first option is selected, not the one that data.campo6 says.
$(pane2 + " #second").val(data.campo6);
}
I would really appreciate any help. Thanks.