1

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!

6
  • Que es .variaciones? No aparece algo asi en el HTML
    – F.Igor
    Commented el 26 ago. 2020 a las 13:16
  • Es la clase que le pongo a los multiselect, en el Javascript que los genera lo veras @F.Igor
    – Miguel
    Commented el 26 ago. 2020 a las 13:17
  • $('.variaciones').val() debería devolverte el valor del multiselect con los valores seleccionados separados por comas. Saludos. Commented el 26 ago. 2020 a las 14:18
  • Hola @JosueArriola eso ya lo he probado y sucede lo mismo
    – Miguel
    Commented el 26 ago. 2020 a las 15:06
  • ¿Cuantos multiselect tienes?, podrias hacer lo mismo pero usando el id del select que obviamente sería único, lo que pasaría seria que tendrias que hacer un $('#algun_id').val() por cada multiselect. Saludos. Commented el 26 ago. 2020 a las 15:13

1 respuesta 1

1

Para poder separar las variaciones de acuerdo al atributo al que pertenecen, hay que crear un objeto donde almacenes los valores data['variaciones-idDeAtributo']. La sugerencia de hacerlo así es para facilitar el manejo a la hora de procesarlos del lado del servidor:

Suponiendo que lo haces con PHP y tienes un atributo con id 3

$atributoId = 3;
$variaciones = $_POST['data']["variaciones-$atributoID"];

Con jQuery es muy fácil crear el objeto, solo recorres cada elemento con clase variaciones y obtienes los valores.

Para obtener nombre de atributo puedes agregar al select data-name="Nombre de atributo" y cambiar en la función .attr('id') por .attr('data-name').

$(document).ready(() => {
    $('#obtener').on('click', () => {
        // Crear objeto
        let data = {};
        $('.variaciones').each(function() {
            // Crear un elemento con ID del select y valores seleccionados
            // data[$(this).attr('id')] = $(this).val();
            
            // En lugar de ID crear con nombre de atributo
            data[$(this).attr('data-name')] = $(this).val();
        });
        console.log(data);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Atributo <select class="form-control myinputs col-4 inlinBlock" name="selAtributo[]" id="selAtributo">
   <option value="" disabled selected>Selecciona atributo</option>
   <option value="1">Atributo 1</option>
   <option value="2">Atributo 2</option>
   <option value="3">Atributo 3</option>
</select><br>

Atributo 1 <select class="js-example-basic-multiple form-control formNuevo variaciones" name="variaciones-1[]" multiple id="variaciones-1" data-name="Nombre atributo 1">
   <option value="" disabled selected>Selecciona variación</option>
   <option value="1">Atributo 1 variación 1</option>
   <option value="2">Atributo 1 variación 2</option>
   <option value="3">Atributo 1 variación 3</option>
</select><br>

Atributo 2 <select class="js-example-basic-multiple form-control formNuevo variaciones" name="variaciones-2[]" multiple id="variaciones-2" data-name="Nombre atributo 2">
   <option value="" disabled selected>Selecciona variación</option>
   <option value="1">Atributo 2 variación 1</option>
   <option value="2">Atributo 2 variación 2</option>
   <option value="3">Atributo 2 variación 3</option>
</select><br>

Atributo 3 <select class="js-example-basic-multiple form-control formNuevo variaciones" name="variaciones-3[]" multiple id="variaciones-3" data-name="Nombre atributo 3">
   <option value="" disabled selected>Selecciona variación</option>
   <option value="1">Atributo 3 variación 1</option>
   <option value="2">Atributo 3 variación 2</option>
   <option value="3">Atributo 3 variación 3</option>
</select><br>
<button id="obtener">Obtener variaciones</button>

8
  • Hola @Triby funciona perfecto, pero puedo traer el nombre en lugar del ID??
    – Miguel
    Commented el 26 ago. 2020 a las 20:29
  • Sí es posible y solo se necesitan un par de cambios, revisa la actualización.
    – Triby
    Commented el 26 ago. 2020 a las 20:40
  • Si lo acabo de hacer? genial funciona perfecto. Una pregunta más pro favor, puedo acceder a esas variables que crea, que en este caso por ejemplo es genero talla etc.?? gracias @Triby
    – Miguel
    Commented el 26 ago. 2020 a las 20:50
  • No espera miento, tengo pemutar ya lo que viene, pero ahí no se como. Por que si guardo cada uno en var = data.genero seria una forma manual y si luego con el tiempo añaden un nuevo atributo no funcionaria
    – Miguel
    Commented el 26 ago. 2020 a las 20:53
  • No crees elementos directamente (hardcode), hazlo por variables que ya tienes, por ejemplo: var data[this.atributo.genero] = 'Algún valor';
    – Triby
    Commented el 26 ago. 2020 a las 20:58

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.