2

Bien, primero que todo no se como formular bien la pregunta. en todo caso en lo que necesito ayuda es en:

Tengo un código javascript con el cual aumento filas a una tabla, uso appendClild para eso, aquí el codigo:

var td1 = document.createElement("td");
td1.setAttribute("colspan", "2");
    var div_sel = document.createElement("div");
    div_sel.setAttribute("class", "form-group-custom");

        var seleccion = document.createElement("select");
        seleccion.setAttribute("class", "form-control form-control-sm-custom");
        seleccion.setAttribute("id", "inputState");
            var opcion = document.createElement("option");
            opcion.text = "Seleccionar...";
            opcion.value = "cantidad" //AQUI ES DONDE DEBERIA ESTAR LOS DATOS DEL @FOREACH
        
seleccion.appendChild(opcion);
div_sel.appendChild(seleccion);
td1.appendChild(div_sel);

Bien lo que hago es agregar select a un td que luego sera agregado a un tr y así... este es el ejemplo del resultado con un primer tr con los respectivos campos y el foreach de forma correcta. Código:

<td>
   <div class="form-group-custom">
       <select id="inputState" class="form-control form-control-sm-custom">
             <option selected value="0">Seleccionar...</option>
                   @foreach ($sbu_datos as $item)
                         <option value="{{$item->sbu_id}}" title="{{$item->grupo_ocupacional}}">{{$item->abreviatura}}</option>
                   @endforeach
       </select>
   </div>
</td>

Imagen: Como se aprecia si muestra el dato de la BDD con el @foreach. introducir la descripción de la imagen aquí

y cuando agrego la primera fila que se crea con appendChild se ve así: introducir la descripción de la imagen aquí

No se como cargar son los datos para que se muestren...

1 respuesta 1

2

En resumen lo que necesitas es recorrer tu arreglo sbu_datos, para crear los option que te faltan en tu select con su respectivo valor. Dejo un ejemplo de como puedes hacerlo:

var sbu_datos = [
    { sbu_id: 1, abreviatura: 'valor 1' },
    { sbu_id: 2, abreviatura: 'valor 2' },
    { sbu_id: 3, abreviatura: 'valor 3' },
    { sbu_id: 4, abreviatura: 'valor 4' },
    { sbu_id: 5, abreviatura: 'valor 5' },
    { sbu_id: 6, abreviatura: 'valor 6' },
];

var contenedor = document.getElementById('container');

var seleccion = document.createElement('select');
seleccion.setAttribute('class', 'form-control form-control-sm-custom');
seleccion.setAttribute('id', 'inputState');

var opcion = document.createElement('option');
opcion.text = 'Seleccionar...';
opcion.value = '0';
seleccion.appendChild(opcion);

sbu_datos.forEach(item => {
    opcion = document.createElement('option');
    opcion.text = item.abreviatura;
    opcion.value = '' + item.sbu_id;
    seleccion.appendChild(opcion);
});

contenedor.appendChild(seleccion);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3" id="container"></div>

1
  • 2
    Considera que aunque interesante la respuesta esperada deberá involucrar AJAX y Laravel de lo contrario me parece queda corta tu solución
    – user128299
    Commented el 10 feb. 2020 a las 3:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.