Preis-Anpassung mittels zwei Dropdown-Feldern

suntrop

Erfahrenes Mitglied
Hallo zusammen

Ich habe auf einer Art Produkt-Seite einen Preis, den ich anpassen will, je nach Auswahl zweier <select> Felder. Feld A ist die Ausstattung/Variante und Feld B ist die Anzahl. Jede Variante hat andere Preise. Und es sind Staffelpreise, d.h. ich kann nicht einfach die Menge aus Feld B nutzen und Multiplizieren. Deswegen bin ich mit dem Konstrukt unterwegs:
HTML:
<div id="product_price">€ 123,00</div>
<hr>
<select name="product_variation" id="product_variation">
    <option data-qtyprices="20:€ 94,06/40:€ 188,12/60:€ 282,17/80:€ 376,23/100:€ 470,29" value="1">Ausstattung I</option>
    <option data-qtyprices="10:€ 94,06/20:€ 188,12/30:€ 282,17/40:€ 376,23/50:€ 470,29" value="2">Ausstattung II</option>
    <option data-qtyprices="8:€ 44,93/16:€ 89,87/24:€ 134,80/32:€ 179,74/40:€ 224,67" value="3">Ausstattung III</option>
</select>
<hr>
<select name="product_quantity" id="product_quantity">
    <option value="8" data-price="€ 89,87">8 Stück</option>
    <option value="16" data-price="€ 179,74">16 Stück</option>
    <option value="24" data-price="€ 269,61">24 Stück</option>
    <option value="32" data-price="€ 359,48">32 Stück</option>
    <option value="40" data-price="€ 449,34">40 Stück</option>
    <option value="48" data-price="€ 539,21">48 Stück</option>
    <option value="56" data-price="€ 629,08">56 Stück</option>
    <option value="64" data-price="€ 718,95">64 Stück</option>
    <option value="72" data-price="€ 808,82">72 Stück</option>
    <option value="80" data-price="€ 763,88">80 Stück</option>
</select>
Javascript:
// Beim ersten Aufruf der Seite die Werte setzen
setPriceData();

// Function setPriceData
function setPriceData() {
    // Die <option> Einteräge aus dem <select> entfernen, damit neue eingefügt werden könnnen
    var product_quantity = document.getElementById("product_quantity");
    for(i = product_quantity.options.length - 1 ; i >= 0 ; i--) {
        product_quantity.remove(i);
    }

    // Neue Produktmengen anhand der ausgewählten Asusstattung einfügen
    var qtyprices = document.getElementById('product_variation');
    var option    = qtyprices.options[qtyprices.selectedIndex];
    var attrs     = option.attributes;
    var data      = option.getAttribute("data-qtyprices");

    var priceArray = data.split("/"); // console.log(priceArray);

    // Werte in QTY <select> einfügen
    var new_priceArray = new Array();
    for (var i = 0; i < priceArray.length; i++) {
        new_priceArray[i] = priceArray[i].split(":");
        product_quantity.options[i] = new Option(new_priceArray[i][0] + ' Stück', new_priceArray[i][0]);
        product_quantity.options[i].setAttribute('data-price', new_priceArray[i][1]);
    }
}

// Event Listener CHANGE: <select> Ausstattung
var product_variation = document.getElementById("product_variation");
product_variation.addEventListener("change", function(event) {
    setPriceData();
    var product_quantity = document.getElementById("product_quantity");
        var option = product_quantity[this.selectedIndex];
        var price = option.getAttribute("data-price");
        document.getElementById('product_price').innerHTML = price;
    event.stopImmediatePropagation();
});

// Event Listener CHANGE: <select> Anzahl
var product_quantity = document.getElementById("product_quantity");
product_quantity.addEventListener("change", function(event) {
    var option = this[this.selectedIndex];
    var price = option.getAttribute("data-price");
    document.getElementById('product_price').innerHTML = price;
    event.stopImmediatePropagation();
});

Hier als Beispiel:
https://codepen.io/suntrop/pen/KrMgvV

Wenn ich die Anzahl ändere, dann wird der Preis korrekt geändert. Aber wenn ich z. B. Ausstattung II wähle, dann wird die Anzahl auf 10 geändert, aber der Preis für 20 angezeigt. Ich komme irgendwie nicht dahinter warum. Ich nehme an, weil zuvor die Anzahl auf 20 war.
 
Mir scheint, der Fehler liegt hier:
var option = product_quantity[this.selectedIndex];
thisist hier das Select für die Ausstattungsvariante, Du brauchst jedoch den Index des Select für Anzahl/Preise:
var option = product_quantity[product_quantity.selectedIndex];
 
Zurück