0

Tengo el siguiente codigo y lo que quisiera es que por cada registro que me encuentre dentro de mi base de datos me cree un option estoy trabajando con laravel cree una funcion donde me trae todos los conceptos registrados y cacho todo mediante ajax el detalle es que puedo meter n cantidad de registros.

public function autocompletar(){
            $conceptos = Concepto::get();
            echo $conceptos;
        }

    $.ajax({
    type: "GET",
    url: '/autocompletar',
    success: function(data) {  
      var conceptos = JSON.parse(data);
      conceptos.forEach(function(element) {
        '<option value="'+ element.nombre +'">'+ element.nombre +'</option>'
      })

      var cont = $(".gasto_logistica_rows").length;
      var a = cont + 1;

      var div = document.createElement('div')
      div.setAttribute('class','row gasto_logistica_rows')

      div.innerHTML = 
      '<div class="col-md-1">'+
        '<div class="form-group">'+
          '<input class="form-control case_gasto_logistica1" name="id_gasto" id="check_logistica_'+ a +'" type="checkbox" value="" Onchange="seleccionarCheckboxLogistica(this.value)"/>'+
        '</div>'+
      '</div>'+

      '<input class="form-control" hidden id="tipo_logistica_'+ a +'" name="tipo_gasto_logistica[]" type="text" value="Logistica"/>'+

      '<div class="col-md-3">'+
        '<div class="form-group">'+
          '<select class="form-control" id="concepto_logistica_'+ a +'" name="concepto_gasto_logistica[]" type="text" Onchange="autocompletar_gasto_logistica('+ a +')" required/>'+
            '<option disabled selected> Seleccionar </option>'+
            //Foreach aqui //
            '<option value="1"> 1 </option>'+
            '<option value="2"> 2 </option>'+
            '<option value="3"> 3 </option>'+
            // ----------//
          '</select>'+
        '</div>'+
      '</div>';

      document.getElementById('gastos_logistica').append(div);
    } 

    });
}
3
  • Y el código PHP?
    – user85192
    Commented el 4 jun. 2019 a las 14:54
  • gael. Bienvenido a Stack Overflow en español. Entiendo que estás intentando escribir código HTML de forma dinámica, te pido agregues el código PHP en el que asignas el resultado de tu query por favor.
    – Pak Lei
    Commented el 4 jun. 2019 a las 14:56
  • listo, una disculpa, soy nuevo aqui
    – gael9310
    Commented el 4 jun. 2019 a las 15:03

4 respuestas 4

0

si ya tienes una matriz podrias recorrerla antes y armar las opciones de tu select. Luego esta la agregas al contenido del innerHTML.

Ahora si estas usando jQuery, deberias obtener el elemento $("#div") y escribir en el asi $("#div").html(contenidodeldiv)

var div = document.getElementById("div");
  var a = "";
  var matriz = [4,5,6,7,8,9];
  var opciones = ""
  matriz.forEach(function(value,index){
    opciones += "<option value='"+index+"'>"+value+"</option>";
  });
  
  
  div.innerHTML = 
    '<div class="col-md-1">'+
        '<div class="form-group">'+
            '<input class="form-control case_gasto_logistica1" name="id_gasto" id="check_logistica_'+ a +'" type="checkbox" value="" Onchange="seleccionarCheckboxLogistica(this.value)"/>'+
        '</div>'+
    '</div>'+

    '<input class="form-control" hidden id="tipo_logistica_'+ a +'" name="tipo_gasto_logistica[]" type="text" value="Logistica"/>'+

      '<div class="col-md-3">'+
        '<div class="form-group">'+
          '<select class="form-control" id="concepto_logistica_'+ a +'" name="concepto_gasto_logistica[]" type="text" Onchange="autocompletar_gasto_logistica('+ a +')" required/>'+
            '<option disabled selected> Seleccionar </option>'+
            opciones +
            '<option value="1">1</option>'+
            '<option value="2">2</option>'+
            '<option value="3">3</option>'+
            //--------------//
          '</select>'+
        '</div>'+
      '</div>';
<div id="div"></div>

0

Podrías usar una String Template para esto y usar .map() en lugar de .forEach(). Así puedes iterar sobre tu array y añadir el contenido que necesitas.

const options = [1, 2, 3];

const div = document.querySelector('div');

div.innerHTML = `
    <div class="col-md-1">
      <div class="form-group">
        <input class="form-control case_gasto_logistica1" name="id_gasto" id="check_logistica_" type="checkbox" value="" Onchange="seleccionarCheckboxLogistica(this.value)"/>
      </div>
    </div>

    <input class="form-control" hidden id="tipo_logistica_" name="tipo_gasto_logistica[]" type="text" value="Logistica"/>
    <div class="col-md-3">
      <div class="form-group">
        <select class="form-control" id="concepto_logistica_" name="concepto_gasto_logistica[]" type="text" Onchange="autocompletar_gasto_logistica()" required/>
          <option disabled selected> Seleccionar </option>
                ${options.map(val => `<option value="${val}">option ${val}</option>`).join('')}
        </select>
      </div>
    </div>
`;
<div></div>

0

Debes de crear primero un arreglo con tus opciones, algo como:

var options = [
    '<option value="1">1</option>',
    '<option value="2">2</option>',
    '<option value="3">3</option>',
    '<option value="4">4</option>'
];

Luego, necesitas una función que te genere todo el string

var optionString = '';

function myFunction(item, index) {
  optionString = optionString + item; 
}

Esa función la tienes que mandar llamar en algún evento, ya sea en un evento onLoad (que creo es lo mejor en este caso), al hacer click en un botón, ya depende de tus necesidades.

Agrega la variable optionString dentro de tus opciones y listo.

0

Puedes crear una nueva variable y luego anidarla en ese lugar.

$.ajax({
    type: "GET",
    url: '/autocompletar',
    success: function(data) {  
      var conceptos = JSON.parse(data);
      // creo un variable como string vacío
      var options = '';
      conceptos.forEach(function(element) {
        // agrego al string el option con el valor del array
        options += '<option value="'+ element.nombre +'">'+ element.nombre +'</option>';
      })

      var cont = $(".gasto_logistica_rows").length;
      var a = cont + 1;

      var div = document.createElement('div')
      div.setAttribute('class','row gasto_logistica_rows')

      div.innerHTML = 
      '<div class="col-md-1">'+
        '<div class="form-group">'+
          '<input class="form-control case_gasto_logistica1" name="id_gasto" id="check_logistica_'+ a +'" type="checkbox" value="" Onchange="seleccionarCheckboxLogistica(this.value)"/>'+
        '</div>'+
      '</div>'+

      '<input class="form-control" hidden id="tipo_logistica_'+ a +'" name="tipo_gasto_logistica[]" type="text" value="Logistica"/>'+

      '<div class="col-md-3">'+
        '<div class="form-group">'+
          '<select class="form-control" id="concepto_logistica_'+ a +'" name="concepto_gasto_logistica[]" type="text" Onchange="autocompletar_gasto_logistica('+ a +')" required/>'+
            '<option disabled selected> Seleccionar </option>'+
            //Foreach aqui
            // agrego la variable con los options
            options +
            // ----------//
          '</select>'+
        '</div>'+
      '</div>';

      document.getElementById('gastos_logistica').append(div);
    } 

    });
}
3
  • edit la pregunta y agregue todo el codigo que se hace
    – gael9310
    Commented el 4 jun. 2019 a las 15:11
  • @gael9310 edité la respuesta con lo que agregaste, al final no estaba mal lo que habías hecho, faltaba agregarlo a una variable para luego llamarlo.
    – Kleith
    Commented el 4 jun. 2019 a las 15:27
  • muchisimas gracias, funciono :D
    – gael9310
    Commented el 4 jun. 2019 a las 15:29

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.