通过AJAX将数据从数据库检索到选项值

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>&nbsp;</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;"><a href="javascript:;" class="selectEmpresa" data-id="'+val.id+'">seleccionar</a></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