automatisches zusammen rechen

A

Andrin Spitzer

Mitglied
Guten Tag

ich will das das ich mehrere Auswahl Möglichkeiten habe <select> und das die Produkte die preise der Produkte dan zusammen gerechnet werden und in einem <a> zusammen gerechnet dargestellt werden
HTML: 
<select class="shop-box select" name="cpu">
                <option selected>Case</option>
                <option value="case-1"><a>i3  70.-</a></option>
                <option value="case-2"><a>i5  100.-</a></option>
                <option value="case-3"><a>i7  150.-</a></option>
            </select>
          
<select class="shop-box select" name="case">
                <option selected>Case</option>
                <option value="case-1"><a>asd  70.-</a></option>
                <option value="case-2"><a>d as 100.-</a></option>
                <option value="case-3"><a>dasf  150.-</a></option>
            </select>

 <a class="preiss-gesamt">150.-</a>

der preis soll dan automatisch aktualisiert werden.

ich hoffe sie verstehen was ich meine und können mir helfen
 
Obacht:
Das Element a darf nicht im Element option geschachtelt sein.
Zum Vergrößern anklicken....

Dies sollte es tun:
Code: 
    <select class="shop-box select" name="cpu">
        <option data-preis="" selected>Case</option>
        <option data-preis="70.00" value="case-1">i3  70.-</option>
        <option data-preis="100.00" value="case-2">i5  100.-</option>
        <option data-preis="150.00" value="case-3">i7  150.-</option>
    </select>

    <select class="shop-box select" name="case">
        <option data-preis="" selected>Case</option>
        <option data-preis="70.00" value="case-1">asd  70.-</option>
        <option data-preis="100.00" value="case-2">d as 100.-</option>
        <option data-preis="150.00" value="case-3">dasf  150.-</option>
    </select>
    <a class="preis-gesamt"></a>
    <script>
        $(".shop-box.select").on("change", function () {
            var gesamtpreis = 0;
            $(".shop-box.select option:selected").each(function (idx, ele) {
                var einzelpreis = parseFloat($(this).data("preis"));
                if (!isNaN(einzelpreis)) gesamtpreis += einzelpreis;
            });
            $(".preis-gesamt").text(gesamtpreis.toFixed(2));
        });
</script>
 
Zuletzt bearbeitet:
Hi,

oder mit nativem Javascript:
Code: 
window.addEventListener("load", function() {
    var output = document.querySelector('.preis-gesamt'),
        select = Array.prototype.slice.call(document.querySelectorAll('.shop-box')),
        changeHandle = function(evt) {
            var sum = 0;

            select.forEach(function(elem) {
              var val = elem.options[elem.selectedIndex];
              val = val.dataset.preis ? val.dataset.preis : val.getAttribute('data-preis');
              sum += parseFloat(val);
            });

            output.innerHTML = isNaN(sum) ? '' : sum;
        },
        initSelect = function(element, index, array) {
            element.addEventListener("change", changeHandle, false);
        };

    select.forEach(initSelect);
}, false);
HTML-Code ist gleich wie bei @Sempervivum.

Ciao,
Quaese
 
Guten Tag ich habe noch eine frage zur erweiterung des scripts.

ich habe bestimmte select boxen in der eine anzahl des produktes gewählt wird also zb
HTML: 
<select class="shop-box-more select" name="dat">
                <option data-preis="0"       selected>Festplatte Daten</option>
                <option data-preis="89"      value="WD Harddisk 500GB Sata">WD Harddisk 500GB Sata</option>
                <option data-preis="59"      value="WD Harddisk 750GB Sata">WD Harddisk 750GB Sata</option>
                <option data-preis="89"      value="WD Harddisk 1TB Sata">WD Harddisk 1TB Sata</option>
                <option data-preis="133"     value="WD Harddisk 2TB Sata">WD Harddisk 2TB Sata</option>
                <option data-preis="227"     value="WD Harddisk 3TB Sata">WD Harddisk 3TB Sata</option>
                <option data-preis="134"     value="WD Harddisk 4TB Sata">WD Harddisk 4TB Sata</option>
                <option data-preis="206"     value="WD Harddisk 5TB Sata">WD Harddisk 5TB Sata</option>
                <option data-preis="306"     value="WD Harddisk 6TB Sata">WD Harddisk 6TB Sata</option>
            </select>
            <select class="select anzahl" name="daten">
                <option data-preis="0"       selected>Anzahl</option>
                <option data-preis=""        value="1x">1x</option>
                <option data-preis=""        value="2x">2x</option>
                <option data-preis=""        value="3x">3x</option>
            </select>

wie kann ich nun den preis des produktes mit der anzahl multipliziren und dan zum rest dazu rechnen?
 
Dieses sollte es tun:
Code: 
    <select class="cpu preis" name="dat">
        <option data-preis="0" selected>CPU</option>
        <option data-preis="89" value="cpu1">cpu1</option>
        <option data-preis="100" value="cpu2">cpu2</option>
        <option data-preis="150" value="cpu3">cpu3</option>
    </select>
    <select class="cpu anzahl" name="daten">
        <option data-anzahl="0" selected>Anzahl</option>
        <option data-anzahl="1" value="1x">1x</option>
        <option data-anzahl="2" value="2x">2x</option>
        <option data-anzahl="3" value="3x">3x</option>
    </select>
    <select class="disc preis" name="dat">
        <option data-preis="0" selected>Festplatte Daten</option>
        <option data-preis="89" value="WD Harddisk 500GB Sata">WD Harddisk 500GB Sata</option>
        <option data-preis="59" value="WD Harddisk 750GB Sata">WD Harddisk 750GB Sata</option>
        <option data-preis="89" value="WD Harddisk 1TB Sata">WD Harddisk 1TB Sata</option>
        <option data-preis="133" value="WD Harddisk 2TB Sata">WD Harddisk 2TB Sata</option>
        <option data-preis="227" value="WD Harddisk 3TB Sata">WD Harddisk 3TB Sata</option>
        <option data-preis="134" value="WD Harddisk 4TB Sata">WD Harddisk 4TB Sata</option>
        <option data-preis="206" value="WD Harddisk 5TB Sata">WD Harddisk 5TB Sata</option>
        <option data-preis="306" value="WD Harddisk 6TB Sata">WD Harddisk 6TB Sata</option>
    </select>
    <select class="disc anzahl" name="daten">
        <option data-anzahl="0" selected>Anzahl</option>
        <option data-anzahl="1" value="1x">1x</option>
        <option data-anzahl="2" value="2x">2x</option>
        <option data-anzahl="3" value="3x">3x</option>
    </select>
    <span id="gesamtpreis"></span>
    <script>
        var artikel = ["cpu", "disc"];
        function berechnen() {
            var gesamtpreis = 0;
            artikel.forEach(function (ele, idx) {
                var preis = parseFloat($("." + ele + ".preis option:selected").data("preis"));
                var anzahl = parseInt($("." + ele + ".anzahl option:selected").data("anzahl"));
                if (!isNaN(preis) && !isNaN(anzahl)) {
                    gesamtpreis += (preis * anzahl);
                }
            });
            $("#gesamtpreis").text(gesamtpreis.toFixed(2));
        }
        $(".preis, .anzahl").on("change", berechnen);
    </script>
 
Zuletzt bearbeitet:
Verstehe die Frage nicht. Das Skript basiert auf dieser Liste:
Code: 
var artikel = ["cpu", "disc"];
Wenn Du weitere selects hinzu fügen möchtest, musst Du nur eine entspr. Klasse hinzu fügen und in den beiden neuen selects ebenfalls diese Klasse sowie die Klassen "preis" und "anzahl" eintragen.
Code: 
var artikel = ["cpu", "disc", "case"];
HTML: 
    <select class="case preis" name="dat">
        hier die Optionen
    </select>
    <select class="case anzahl" name="daten">
        <option data-anzahl="0" selected>Anzahl</option>
        <option data-anzahl="1" value="1x">1x</option>
        <option data-anzahl="2" value="2x">2x</option>
        <option data-anzahl="3" value="3x">3x</option>
    </select>
 
Das habe ich verstanden aber ich habe mehre select optionen in der einen zb suchst du dir ein mainboard das 200 kostet und dan haste noch eine weitere in der du dir dein ram aussuchst und in der nexten wählst du aus wie viel fon dem ram du haben möchtest das heisst es soll der preis fon

mainboard + ( ram x anzahl an ram)

wen du verstehst was ich meine.

den ganzen aufbau siehst du provisorisch hier beim reiter shop

modpc.spitzinet.ch
 
Ja, verstehe. Das tut das Skript: Es rechnet die Gesamtsumme aus und addiert die Resultate der einzelnen "preis * anzahl". Der Fall, dass es keine Anzahl gibt, war bisher nicht vorgesehen. Ich habe es in dieser Version berücksichtigt:
Code: 
        var artikel = ["mainboard", "cpu", "disc"];
        function berechnen() {
            var gesamtpreis = 0;
            artikel.forEach(function (ele, idx) {
                var preis = parseFloat($("." + ele + ".preis option:selected").data("preis"));
                if ($("." + ele + ".anzahl").length > 0)
                    var anzahl = parseInt($("." + ele + ".anzahl option:selected").data("anzahl"));
                else var anzahl = 1;
                if (!isNaN(preis) && !isNaN(anzahl)) {
                    gesamtpreis += (preis * anzahl);
                }
            });
            $("#gesamtpreis").text(gesamtpreis.toFixed(2));
        }
        $(".preis, .anzahl").on("change", berechnen);
Du kannst dann z. B. beim Mainboard das select für die Anzahl weg lassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück