Für die Nachwelt: Dank der Vorarbeit war es recht einfach, die Abhängigkeiten der Kombinationen mit ein paar Zeilen Javascript noch einzufügen. Sicher nicht perfekt, aber es geht. Hier mein Ansatz:
Zunächst werden die Felder X_001 (Textilart), X_003 (Farbe) und X_004 (Größe) initialisiert, wobei nur für X_001 Werte eingegeben werden, die anderen setze ich per JS:
Code:
// Insert selects
// X_001: Textilart
$('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append(
'<select class="inserted-select form-control list-question-select">\
<option value="">Bitte auswählen</option>\
<option value="1">T-Shirt</option>\
<option value="2">Hoody</option>\
<option value="3">Fleecejacke Vintage</option>\
<option value="4">Fleecejacke</option>\
<option value="5">Polo</option>\
<option value="6">Softshelljacke</option>\
<option value="7">Softshellweste</option>\
<option value="8">Sweatshirt</option>\
<option value="9">Zip-Hoody</option>\
</select>');
// X_003: Farbe (abhängig von X_001)
$('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append(
'<select class="inserted-select form-control list-question-select">\
<option value="">Bitte Textil wählen!</option>\
</select>');
// X_004: Größe (abhängig von X_001)
$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append(
'<select class="inserted-select form-control list-question-select">\
<option value="">Bitte Textil wählen!</option>\
</select>');
Anschließend habe ich mir noch ein Helfer definiert, ich wollte an der Logik für die Preise von Joffm festhalten, daher das Mapping von Größen zu Zahlen:
Code:
// Helpers, dicts set the right text, value combination
var thisQuestion = $('#question{QID}');
var sizes = {
"XS": "1",
"S": "2",
"M": "3",
"L": "4",
"XL": "5",
"XXL": "6",
"3XL": "7",
"4XL": "8",
"5XL": "9",
};
var colors = {
"Anthrazit": "1",
"Anthrazit/Platin": "2",
"Charcoal": "3",
"Grau": "4",
"Schwarz": "5",
"Steel Grey": "6",
"Weiß": "7",
"Zinn": "8",
};
Schließlich dann mittels Listener die anderen beiden Dropouts befüllen. Um anzugeben, welches Textil es in welchen Farben und Größen gibt, habe ich ein simples array verwendet, das ich via switch definiere:
Code:
// Listeners: Changing of textile type will populate the other select fields
$('.answer-item.answer_cell_X001 .inserted-select', thisQuestion).on('change', function(i) {
let textilCode = $('option:selected', this).val();
let textilName = $('option:selected', this).text();
let allowedColors;
let allowedSizes;
// Select fields for size and color
let colorSelect = $(this).closest('tr').find('.answer-item.answer_cell_X003 .inserted-select');
let sizeSelect = $(this).closest('tr').find('.answer-item.answer_cell_X004 .inserted-select');
// Clear select fields and add dummy text
colorSelect.find('option').remove().end().append('<option value="">Bitte auswählen</option>').val('');
sizeSelect.find('option').remove().end().append('<option value="">Bitte auswählen</option>').val('');
// Prepare population of other dropdowns
switch (textilName) {
case 'T-Shirt':
allowedColors = ["Schwarz", "Steel Grey", "Weiß"];
allowedSizes = ["XS", "S", "M", "L", "XL", "XXL", "3XL", "4XL", "5XL"];
break;
case 'Hoody':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Fleecejacke Vintage':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Fleecejacke':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Polo':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Softshelljacke':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Softshellweste':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Sweatshirt':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
case 'Zip-Hoody':
// TODO: Update der Größen und Farben
allowedColors = ["Weiß"];
allowedSizes = ["5XL"];
break;
default:
break;
}
// Populate select fields based on switch selection
$.each(allowedColors, function(_, value) {
colorSelect.append($("<option></option>").attr("value", colors[value]).text(value));
});
$.each(allowedSizes, function(_, value) {
sizeSelect.append($("<option></option>").attr("value", sizes[value]).text(value));
});
});
Das wars auch schon, der Rest ist 1:1 die Implementierung von Joffm. Mittels Bootstrap cards und modals sieht der Einleitungstext jetzt auch nett aus.
VG
Moritz
Topic Author
