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