JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<div id="select-container">

</div>

JavaScript

const roles =  [
    { cargo: 'Administrador da plataforma', rol_id: 1 },
    { cargo: 'Gerente da fábrica', rol_id: 2 },
    { cargo: 'Armazenista', rol_id: 3 },
    { cargo: 'Supervisor', rol_id: 4 }
    ]
// Obtener los roles de la base de datos
async function populateRolesSelect(rol1) {
    //const roles = await getRoles();

    let roleSelect = '<select name="rol" id="rol" class="form-control">';
    
    // Iterar sobre los roles y construir las opciones del select
    roles.forEach(role => {
        const selected = role.rol_id === rol1 ? 'selected' : ''; // Marcar la opción como seleccionada si coincide con rol1
        roleSelect += `<option value="${role.rol_id}" ${selected}>${role.cargo}</option>`;
    });

    roleSelect += '</select>';

    // Agregar el select al elemento HTML donde desees mostrarlo
    const selectContainer = document.getElementById('select-container'); // Reemplaza 'select-container' con el ID de tu contenedor HTML
    selectContainer.innerHTML = roleSelect;
}

//const rol1 = 2
populateRolesSelect(4);
// Llama a la función para poblar el select