Yo lo plantearía un poco distinto.
Tu lógica es " devuelvo N elementos que comienzan por la raíz y terminan en cada variación del nivel actual, concatenando por punto (o guión)"
En el ejemplo mínimo
function agregarNivel(variaciones, raiz) {
return variaciones.map(variacion=>[raiz,variacion].join('.');
}
Si llenas eso recursivamente y el nodo padre es "permutación", el resultado tiene la forma
permutación.variacion1
permutación.variacion2
permutación.variacion3
...
Si pasas un string vacío como nodo padre llegarías a
.variacion1
.variacion2
.variacion3
Tendrías que poner un condicional que es poco elegante:
function agregarNivel(variaciones, raiz) {
return variaciones.map(variacion=>
raiz ? [raiz,variacion].join('.') : variacion
}
Me parece precario, y en realidad lo que estás haciendo es imitar la lógica de un array. Donde tú concatenas el array añade elementos. La diferencia es que un array no requiere lógica adicional para parchar la adición del primer elemento.
En este ejemplo (dejo el snippet) usé arreglos a los que voy añadiendo variaciones (en vez de string+concatenar, array+pushear). Recién al obtener el resultado me ocupo de concatenar la salida.
En el nivel inicial le paso un array vacío como raíz.
function generacion_recursiva(tipos, nivel, raiz) {
if (nivel >= tipos.length - 1) {
return tipos[nivel].variaciones.map(x => {
return raiz.concat([x]);
});
}
let resultados = [];
tipos[nivel].variaciones.forEach(elemento => {
generacion_recursiva(tipos, nivel + 1, raiz.concat([elemento]))
.forEach(elemento => {
resultados.push(elemento);
});
});
return resultados;
}
$('#calcular').on('click', () => {
let selects = $('.variaciones');
let tipos = [];
selects.each(function(indice) {
// Agregamos un elemento por select encontrado
tipos[indice] = {
id: $(this).attr('id'),
variaciones: $(this).val() || []
};
});
// Generamos las permutaciones
var permutas = generacion_recursiva(tipos, 0, []).map(res => res.join('.'))
$('#resultados').empty();
console.log(permutas);
permutas.forEach(valor => {
let optionElement = $(`<option value="${valor}">${valor}</option>`);
$('#resultados').append(optionElement);
})
});
.titulo {
width: 33%;
float: left;
}
.variaciones {
display: block;
width: 120px;
}
.resultados {
width: 340px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="titulo">Edad y Género
<select class="variaciones" multiple id="edad_genero">
<option value="mujer">mujer</option>
<option value="niño">niño</option>
<option value="hombre">hombre</option>
</select>
</div>
<div class="titulo">Color
<select class="variaciones" multiple id="color">
<option value="negro">negro</option>
<option value="rojo">rojo</option>
<option value="blanco">blanco</option>
</select>
</div>
<div class="titulo">Material
<select class="variaciones" multiple id="material">
<option value="lana">lana</option>
<option value="algodón">algodón</option>
<option value="nylon">nylon</option>
</select>
</div>
<button id="calcular">Calcular Permutaciones</button>
</div>
<div>
<select class="resultados" multiple id="resultados">
</select>
$('.variaciones')
son selects de opción múltiple?