0

Buenas tardes estoy intentado cargar por JavaScript un select multiple. Tengo un select, donde cargo unos datos de la BD que se llaman Atributos. Una vez selecciono el atributo que quiero le doy a un botón que hace llamada a una función que envia la ID del atributo para consultar una base de datos.

Así hago la petición

function myFunction() {
   var atributo = document.getElementById('selAtributo').value;
    console.log(atributo);
    $.get('add-producto/select_atributo/' + atributo,function(data) {
       $.each(data, function(fetch, terminos){
       console.log(data);
        #Aqui con el console, compruebo que la info llega perfecta
       })
    })

};
    

Mi ruta

Route::get('/productos/add-producto/select_atributo/{atributo}', 'app@sacaTerminos');

Mi controlador

public function sacaTerminos($atributo)
{
  $terminos = Termino::where('atributo_id', $atributo)->get();
  return with(["terminos" => $terminos]);
}

Luego después del console, hago lo siguiente para que me cargue un select multiple y me deje añadir los valores que traigo por base de datos.

  $('#terminos1').append('<div class="form-group">\
  <select class="js-example-basic-multiple form-control formNuevo" name="complementos[]" multiple="multiple" id="men">');
     for(i = 0; i < terminos.length; i++){
      $('#terminos1').append('<option value=" 1 "> '+ terminos[i].termino +'</option>');
     }
   $('#terminos1').append('</select></div>');

El div id donde se carga esta de forma natural vacio:

<div id="terminos1"></div>

Se que sera una chapuza lo que estoy haciendo, pero por primera vez estoy intentando construir todo yo solo y se me complica un poco, supongo que hay que concatenar la información pero no se como hacerlo. Además que no consigo que cuando inserta el multi select me salga con los estilos de select2

Modificación de código, para ver por que no puedo añadir más de un select2 con los estilos que tocan

function myFunction() {
        var atributo = document.getElementById('selAtributo').value;
        console.log(atributo);
        
        $.get('add-producto/select_atributo/' + atributo,function(data) {
            
            $.each(data, function(fetch, terminos){
                console.log(data);
                const htmlDivContainer = '<div class="form-group select-container"></div>';
                const htmlSelectContainer =
                '<select class="js-example-basic-multiple form-control formNuevo" name="complementos[]" multiple="multiple" id="men"></select>';
                $("#terminos").append(htmlDivContainer);
                $("#terminos div.select-container").html(htmlSelectContainer);
                const htmlOptions = terminos.reduce(
                (html, termino, index) =>
                    html + `<option value="${index}">${termino.termino}</option>`,
                ""
                );
                $("#terminos #men").html(htmlOptions).select2()
                console.log(htmlOptions);
            })
        })

    };

2 respuestas 2

1

Para que te tome los estilos de select2 tienes que inicializar el select, por ejemplo $('#miSelect').select2(), a su vez revisando tu código veo que puede ser un poco complicado meterle mano si estas insertando todo con un solo apped, para que sea mas claro te recomendaría que lo movieras en varios pasos, por ejemplo, primero insertas tu contenedor(div), luego tu select y ya por ultimo tus opciones, aunque si yo fuera tu metería tu select directamente a tu HTML, no veo el porque lo tengas que construir desde tu JS.

Haciendo estas modificaciones tu código puede quedar de la siguiente manera:

const htmlDivContainer = '<div class="form-group select-container"></div>';
const htmlSelectContainer =
  '<select class="js-example-basic-multiple form-control formNuevo" name="complementos[]" multiple="multiple" id="men"></select>';
$("#terminos1").append(htmlDivContainer);
$("#terminos1 div.select-container").html(htmlSelectContainer);
const htmlOptions = terminos.reduce(
  (html, termino, index) =>
    html + `<option value="${index}">${termino.termino}</option>`,
  ""
);
$("#terminos1 #men").html(htmlOptions).select2();
8
  • Brillante! gracias por tu respuesta @Jesus Ochoa , pero una pregunta, como se puede añadir más de un select2, si añado un segundo ya no sale con el formato de select2, que hay que hacer?? un ciclo o algo así?
    – Miguel
    Commented el 22 ago. 2020 a las 20:51
  • No deberías tener ese problema, según la documentación deberías poder agregar un segundo select2 sin problema, lo que podemos hacer es que agregues tu código y vemos si esta pasando por algún otro tema. Commented el 22 ago. 2020 a las 21:03
  • Pues el segundo, tercero, etc.. no le pone estilos y crear un select multiple sin utilizar select2, he modificado la pregunta y he puesto el código al final para que lo veas como está @Jesus Ochoa
    – Miguel
    Commented el 22 ago. 2020 a las 21:05
  • Creo que se por que es, es porque todos tienen el mismo name tendria que ponerle el nombre del atributo
    – Miguel
    Commented el 22 ago. 2020 a las 21:07
  • Ok, lo que pasa es que estamos poniéndole el msmo id a los selects, eso es erroneo, recordar que el ID tiene que ser único, al intentar tomar los selects por su ID, siempre toma el primero Commented el 22 ago. 2020 a las 21:08
1

Si estás trabajando con select2, debes considerar trabajar haciendo peticiones directas a tu api. Si lees la documentación aquí, select2 cuenta con soporte ajax, por lo cual puedes hacer lo siguiente:

$('.js-example-basic-multiple').select2({
  ajax: {
    url: '/add-producto/select_atributo/',
    type: "get",
    dataType: 'json'
  }
});

Y listo, eso llenará tu select2 con la data, además, debes hacer ciertas modificaciones a tu query en tu controlador. Ya que el formato para select2 es id y text.

public function sacaTerminos($atributo)
{
  $terminos = Termino::
      select('termino_id as id, termino_descripcion as text')
      ->where('atributo_id', $atributo)
      ->get();

  return json_encode($terminos );
}

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.