Retrieve Data from Database to Option Value via AJAX - php

Question

I am having problems trying to fetch some data from my database to display it in a value, I'm using Smarty as a template engine, I have my working code which is:
<div style="width: 50%">
<table id="listado" width="100%" cellpadding="2" cellspacing="1" border="0">
<thead>
<tr>
<th> </th>
<th style="text-align: center;">ID</th>
<th style="text-align: center;">NOMBRE</th>
<th style="text-align: center;">DOCUMENTO</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
{literal}
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
"url": API_PATH+"/empresas/",
"method": "GET",
"dataType": 'json',
'cache':false
}).done(function (response) {
var allregs = [];
$.each(response, function(key,val){
var items = [];
items.push('<tr>');
items.push('<td style="text-align: center;">seleccionar</td>');
items.push('<td style="text-align: center;">'+val.id+'</td>');
items.push('<td style="text-align: center;">'+val.nombre+'</td>');
items.push('<td style="text-align: center;">'+val.documento+'</td>');
items.push('</tr>');
allregs.push(items);
});
$('#listado tbody').append(allregs.join(''));
}).fail(function(jqXHR, textStatus){
if(jqXHR.status == 404){
alert("No existen registros");
}
});
$('body').on('click','.selectEmpresa',function(){
var empresaid = $(this).attr('data-id');
$.ajax({
"url": API_PATH+"/empresas/select/"+empresaid,
"method": "GET",
"dataType": 'json',
'cache':false
}).done(function (response) {
location.href = SERVER_PATH+'/';
}).fail(function(jqXHR, textStatus){
alert('error');
});
});
});
</script>
{/literal}
it works perfectly using normal thead, tbody, tr, td, what im trying to do is fetch the same data just val.nombre but inside :
<div class="container">
<section>
<select class="cs-select cs-skin-border">
<option value="" disabled selected>Seleccionar Empresa</option>
<option value="prueba1">Prueba 1</option>
<option value="prueba2">Prueba 2</option>
<option value="prueba3">Prueba 3</option>
</select>
</section>
</div>
<script src="{$smarty.const.ASSETS_FOLDER}/select-empresas/classie.js"></script>
<script src="{$smarty.const.ASSETS_FOLDER}/select-empresas/selectFx.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el);
} );
})();
</script>
instead of setting the values manually I want to fetch it from the database dynamically