Tengo un select, donde cargo las categorias que hay en la base de datos, cuando selecciono la que quiero a través de un botón de insertar, javascript crea un select multiple con los resultados que puedo añadir a esa subcategoria. Se pueden añadir muchos multi select, entonces necesito meter en un arreglo los valores de cada select, para luego poder permutarlos.
Aquí tengo como saco las categorías, que en este caso son atributos
<select class="form-control myinputs col-4 inlinBlock" name="selAtributo[]" id="selAtributo">
<option value="" disabled selected>Selecciona atriburo</option>
@foreach ($atributos as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
Una vez marco la que quiero le doy a este botón:
<a class="btn btnGuardar corrigeBtnAnadir" onclick="myFunction()" style="color: #fff;">Añadir</a>
Este, llama a una función que me consulta en la base de datos, que subcategorias tiene esa categoría, y se me carga un multiselect donde puedo añadir las opciones que me vienen de base de datos.
function myFunction() {
var atributo = document.getElementById("selAtributo").value;
$.get("add-producto/select_atributo/" + atributo, function (data) {
data.elAtributo = data.elAtributo || {};
var atributoName = data.elAtributo.slug;
var atributoNameBueno = data.elAtributo.name;
var htmlDivContainer = `<div class="form-group select-container-${atributoName}"></div>`;
var htmlSelectContainer = `<select class="js-example-basic-multiple form-control formNuevo variaciones" name="${atributoName}[]" multiple="multiple" id="${atributoName}"></select>`;
$("#terminos1").append(`${atributoNameBueno}`);
$("#terminos1").append(htmlDivContainer);
$(`#terminos1 div.select-container-${atributoName}`).html(
htmlSelectContainer
);
var htmlOptions = (data.terminos || []).reduce(
(html, termino, index) =>
html + `<option value="${termino.id}">${termino.termino}</option>`,
""
);
$(`#terminos1 select[name="${atributoName}[]"`).html(htmlOptions).select2();
console.log(data);
});
}
Esto funciona correcto, selecciono categoria, inserto y me salen bien los multi selects y su contenido para poder elegir.
Pero ahora debajo de todos los multiselects que hayan, he puesto un botón:
<a class="btn btnGuardar" id="guarTT" style="color:#fff;">Guardar atributos</a>
Con este botón quiero extraer los resultados de cada multiselect, pero en variables distintas para después poder permutarlas.
Lo estoy probando así pero de JavaScript no se mucho y no se como hacerlo:
$("#guarTT").click(function(){
$('.variaciones > :selected').each(function() {
console.log($(this).text()); // using text() here, because the
});
});
Así me trae los valores en texto, todos los que hay marcados, pero si por ejemplo hay dos multiselect me repite la acción dos veces, no se como recorrer todos los que hayan.
Alguna sugerencia? Gracias por la ayuda!
.variaciones
? No aparece algo asi en el HTML$('.variaciones').val()
debería devolverte el valor del multiselect con los valores seleccionados separados por comas. Saludos.$('#algun_id').val()
por cada multiselect. Saludos.