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

Question

我在尝试从数据库中获取某些数据以将其显示在值中时遇到问题，我使用Smarty作为模板引擎，我的工作代码是：

<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}

它使用普通的thead，tbody，tr，td完美地工作，我试图做的是获取相同的数据只是val.nombre但内部：

    <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>

而不是手动设置值我想动态地从数据库中获取它