Produkte bei Auswahl hinzufügen

boufier · 1 Januar 2024

Ich möchte bei Auswahl einer Kategorie die dazu angezeigte Produkte in die Auswahlliste hinzufügen und die gesamtsumme berechnen.
Hat jemand eine Idee?

HTML:

<html><head>
    <style>
        select {
  min-width: 150px;
  min-height: 150px;
}
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        function img(x) {
            if (x == 0) {
                document.getElementById('img4').style.display = 'none';
                document.getElementById('img3').style.display = 'none';
              document.getElementById('img2').style.display = 'none';
              document.getElementById('img1').style.display = 'block';
            } else if (x == 2){
              document.getElementById('img1').style.display = 'none';
              document.getElementById('img2').style.display = 'block';
              document.getElementById('img3').style.display = 'none';
              document.getElementById('img4').style.display = 'none';
            

            }else if (x == 3){
              document.getElementById('img1').style.display = 'none';
              document.getElementById('img2').style.display = 'none';
              document.getElementById('img3').style.display = 'block';
              document.getElementById('img4').style.display = 'none';
            }else {
              document.getElementById('img1').style.display = 'none';
              document.getElementById('img2').style.display = 'none';
              document.getElementById('img3').style.display = 'none';
              document.getElementById('img4').style.display = 'block';
            }
          }
        </script>

<div>Tariftyp</div>
    <input type="radio" name="img" onclick="img(0)" checked="">
    Neukunden
   <input type="radio" name="img" onclick="img(2)">
    Bestandskunden
    <input type="radio" name="img" onclick="img(3)">
    Junge Leute
    <input type="radio" name="img" onclick="img(4)">
    Selbständig
    <div id="img1" style="display: block;">
<select name="selectfrom" id="select-from" multiple="" size="5">
    <option value="22.99">Product S</option>
    <option value="27.99">Product S Boost</option>
    <option value="32.99">Product M</option>
    <option value="37.99">Product M Boost</option>
    <option value="42.99">Product L</option>
    <option value="47.99">Product L Boost</option>
    <option value="62.99">Product XL</option>
    
</select>
</div>

<div id="img2" style="display: none;">
    <select name="selectfrom2" id="select-from2" multiple="" size="5">
    <option value="12.99">Product S YP</option>
    <option value="12.99">Product S Boost YP</option>
    <option value="22.99">Product M YP</option>
    <option value="22.99">Product M Boost YP</option>
    <option value="32.99">Product L YP</option>
    <option value="32.99">Product L Boost YP</option>
    <option value="52.99">Product XL YP</option>
    
</select>
</div>
<div id="img3" style="display: none;">
    <select name="selectfrom3" id="select-from3" multiple="" size="5">
    <option value="11.49">Product S KB</option>
    <option value="13.99">Product S Boost KB</option>
    <option value="16.49">Product M KB</option>
    <option value="18.99">Product M Boost KB</option>
    <option value="21.49">Product L KB</option>
    <option value="23.99">Product L Boost KB</option>
    <option value="31.49">Product XL KB</option>
    
</select>
</div>
<div id="img4" style="display: none;">
    <select name="selectfrom4" id="select-from4" multiple="" size="5">
    <option value="20.69">Product S SoHo</option>
    <option value="25.19">Product S Boost SoHo</option>
    <option value="29.69">Product M SoHo</option>
    <option value="34.19">Product M Boost SoHo</option>
    <option value="38.69">Product L SoHo</option>
    <option value="43.19">Product L Boost SoHo</option>
    <option value="56.69">Product XL SoHo</option>
    
</select>
</div>

<a href="#" class="btn add">Add »</a>
<a href="#" class="btn remove">« Remove</a>

<select name="selectto" id="select-to" multiple="" size="5"></select>

<input type="text" name="class" value="0" id="total">
    <script type="text/javascript">
        $(() => {
  const $totalField = $('#total');
  const calcTotal = () => {
    let total = $('#select-to option')
      .map((i, el) => +el.value)
      .get()
      .reduce((a, b) => a + b, 0)
    return total > 0 ? total + 99 : total;
  };
  $('.btn').on('click', (e) => {
    e.preventDefault();
    const tgt = e.target.closest('.btn');
    if (!tgt) return; // not a button
    if (tgt.matches('.add'))
    
    if($("select").attr("id") == "select-from"){
        $('#select-from option:selected').clone().appendTo('#select-to');
    }else if($("select").attr("id") == "select-from1"){
        $('#select-from1 option:selected').clone().appendTo('#select-to');
    }else if($("select").attr("id") == "select-from2"){
        $('#select-from2 option:selected').clone().appendTo('#select-to');
}else if($("select").attr("id") == "select-from3"){
    $('#select-from3 option:selected').clone().appendTo('#select-to');
}else if($("select").attr("id") == "select-from4"){
    $('#select-from4 option:selected').clone().appendTo('#select-to');
}
    
    else $('#select-to option:selected').remove();
    $totalField.val(calcTotal().toFixed(2));
  });
});
    </script>


</body></html>

Oliver77 · 1 Januar 2024

Also ne Funktion zum Addieren würde so aussehen:

Javascript:

let sum =0;

$.each($("#select-from option:selected"), function(){          
sum+= parseFloat($(this).val());
});

Außerdem würde sich das switch Statement anbieten, statt else if.
https://www.w3schools.com/js/js_switch.asp

Sempervivum · 2 Januar 2024

Leider beschreibst Du, @boufier , nicht was das Problem ist. Ich habe mit deinem Code mal eine Testdatei gemacht und was ich dort beobachte ist: Das Hinzufügen der selektierten Optionen funktioniert nur für die erste Kategorie, bei den anderen passiert gar nicht.
Du kannst das Ganze sehr stark straffen und kompakter machen wenn Du mit Klassen arbeitest. Also beim Auswählen eines Select die Klasse "active" hinzu fügen:

HTML:

    <input type="radio" name="img" onclick="chooseCategory('select-from1')" checked>
    Neukunden
    <input type="radio" name="img" onclick="chooseCategory('select-from2')">
    Bestandskunden
    <input type="radio" name="img" onclick="chooseCategory('select-from3')">
    Junge Leute
    <input type="radio" name="img" onclick="chooseCategory('select-from4')">
    Selbständig

Javascript:

        // Kategorie wählen
        // Muss global sein wenn wir die Eventlistener inline notieren
        function chooseCategory(idSelectFrom) {
            // Zunächst bei allen select-from die Klasse "active" löschen:
            $('.select-from').removeClass('active');
            // Jetzt bei der gewählten Kategorie die Klasse "active" setzen:
            $('#' + idSelectFrom).addClass('active')
        }

Und basierend auf dieser Klasse das betr. Select sichtbar machen:

CSS:

        select {
            min-width: 150px;
            min-height: 150px;
        }

        select.select-from {
            display: none;
        }

        select.select-from.active {
            display: block;
        }

Dann kannst Du das Übertragen der gewählten Optionen in das Ziel-Select mit einem Einzeiler erledigen:

Code:

                    // Bei allen selektierten Optionen im aktiven select-from:
                    // Klonen und in #select-to hinzu fügen:
                    $('.select-from.active option:selected').clone().appendTo('#select-to');

Dann entfallen alle diese verketteten ifs.

Der Code im Zusammenhang:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        select {
            min-width: 150px;
            min-height: 150px;
        }

        select.select-from {
            display: none;
        }

        select.select-from.active {
            display: block;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div>Tariftyp</div>
    <input type="radio" name="img" onclick="chooseCategory('select-from1')" checked>
    Neukunden
    <input type="radio" name="img" onclick="chooseCategory('select-from2')">
    Bestandskunden
    <input type="radio" name="img" onclick="chooseCategory('select-from3')">
    Junge Leute
    <input type="radio" name="img" onclick="chooseCategory('select-from4')">
    Selbständig
    <div id="img1">
        <select class="active select-from" name="selectfrom1" id="select-from1" multiple size="5">
            <option value="22.99">Product S</option>
            <option value="27.99">Product S Boost</option>
            <option value="32.99">Product M</option>
            <option value="37.99">Product M Boost</option>
            <option value="42.99">Product L</option>
            <option value="47.99">Product L Boost</option>
            <option value="62.99">Product XL</option>

        </select>
    </div>

    <div id="img2">
        <select class="select-from" name="selectfrom2" id="select-from2" multiple size="5">
            <option value="12.99">Product S YP</option>
            <option value="12.99">Product S Boost YP</option>
            <option value="22.99">Product M YP</option>
            <option value="22.99">Product M Boost YP</option>
            <option value="32.99">Product L YP</option>
            <option value="32.99">Product L Boost YP</option>
            <option value="52.99">Product XL YP</option>

        </select>
    </div>
    <div id="img3">
        <select class="select-from" name="selectfrom3" id="select-from3" multiple size="5">
            <option value="11.49">Product S KB</option>
            <option value="13.99">Product S Boost KB</option>
            <option value="16.49">Product M KB</option>
            <option value="18.99">Product M Boost KB</option>
            <option value="21.49">Product L KB</option>
            <option value="23.99">Product L Boost KB</option>
            <option value="31.49">Product XL KB</option>

        </select>
    </div>
    <div id="img4">
        <select class="select-from" name="selectfrom4" id="select-from4" multiple size="5">
            <option value="20.69">Product S SoHo</option>
            <option value="25.19">Product S Boost SoHo</option>
            <option value="29.69">Product M SoHo</option>
            <option value="34.19">Product M Boost SoHo</option>
            <option value="38.69">Product L SoHo</option>
            <option value="43.19">Product L Boost SoHo</option>
            <option value="56.69">Product XL SoHo</option>

        </select>
    </div>

    <a href="#" class="btn add">Add »</a>
    <a href="#" class="btn remove">« Remove</a>

    <select name="selectto" id="select-to" multiple size="5"></select>

    <input type="text" name="class" value="0" id="total">
    <script>
        // Kategorie wählen
        // Muss global sein wenn wir die Eventlistener inline notieren
        function chooseCategory(idSelectFrom) {
            // Zunächst bei allen select-from die Klasse "active" löschen:
            $('.select-from').removeClass('active');
            // Jetzt bei der gewählten Kategorie die Klasse "active" setzen:
            $('#' + idSelectFrom).addClass('active')
        }
        $(() => {

            const $totalField = $('#total');
            const calcTotal = () => {
                let total = $('#select-to option')
                    .map((i, el) => +el.value)
                    .get()
                    .reduce((a, b) => a + b, 0)
                return total > 0 ? total + 99 : total;
            };
            $('.btn').on('click', (e) => {
                e.preventDefault();
                const tgt = e.target.closest('.btn');
                if (!tgt) return; // not a button
                if (tgt.matches('.add')) {
                    // Bei allen selektierten Optionen im aktiven select-from:
                    // Klonen und in #select-to hinzu fügen:
                    $('.select-from.active option:selected').clone().appendTo('#select-to');
                }
                else {
                    // Button "Remove" wurde gedrückt:
                    $('#select-to option:selected').remove();
                }
                $totalField.val(calcTotal().toFixed(2));
            });
        });
    </script>

</body>

</html>

boufier · 2 Januar 2024

Perfekt. Funktioniert gnau wie ich es haben wollte, vielen Dank.
Wäre es möglich die summierte Zahl in zwei separaten inputs zu spliten (siehe Beispielbild unten)

Sempervivum · 2 Januar 2024

Selbstverständlich, Du kannst das Ergebnis am Punkt aufspalten und dann die beiden Bestandteile in die Inputs eintragen:

Code:

                const splitted = calcTotal().toFixed(2).split('.');
                $totalFieldInt.val(splitted[0]);
                $totatFieldFract.val(splitted[1]);

(dies ungetestet)
Die beiden Variablen für die Eingabefelder musst Du natürlich auch definieren.

boufier · 2 Januar 2024

@Sempervivum: ich hab ´s eben erfolgreich getestet. Vielen Dank

boufier · 3 Januar 2024

zwei dinge möchte ich noch hinzufügen:
1:
$totalFieldInt.val(splitted[0]);
nach der ersten gesplitteten Zahl sollte ein Komma sein. (siehe Bespiel 1)
Beispiel1:

2:
Wenn die Liste entleert wurde und die Null durch die Zahl die über jede Spalte ersetzt werden (Siehe Beispiel) ersetzt werden. Dies sollte bei den anderen Werte in der Tabelle auch geändert werden (siehe Beispiel 2 als Bild)
Beispiel 2:

Anbei der Code:

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        select {
            min-width: 150px;
            min-height: 150px;
        }

        select.select-from {
            display: none;
        }

        select.select-from.active {
            display: block;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div>Tariftyp</div>
    <input type="radio" name="img" onclick="chooseCategory('select-from1')" checked>
    Neukunden
    <input type="radio" name="img" onclick="chooseCategory('select-from2')">
    Bestandskunden
    <input type="radio" name="img" onclick="chooseCategory('select-from3')">
    Junge Leute
    <input type="radio" name="img" onclick="chooseCategory('select-from4')">
    Selbständig
    <div id="img1">
        <select class="active select-from" name="selectfrom1" id="select-from1" multiple size="5">
            <option value="22.99">Product S</option>
            <option value="27.99">Product S Boost</option>
            <option value="32.99">Product M</option>
            <option value="37.99">Product M Boost</option>
            <option value="42.99">Product L</option>
            <option value="47.99">Product L Boost</option>
            <option value="62.99">Product XL</option>
       

        </select>
    </div>

    <div id="img2">
        <select class="select-from" name="selectfrom2" id="select-from2" multiple size="5">
            <option value="12.99">Product S YP</option>
            <option value="12.99">Product S Boost YP</option>
            <option value="22.99">Product M YP</option>
            <option value="22.99">Product M Boost YP</option>
            <option value="32.99">Product L YP</option>
            <option value="32.99">Product L Boost YP</option>
            <option value="52.99">Product XL YP</option>
 

        </select>
    </div>
    <div id="img3">
        <select class="select-from" name="selectfrom3" id="select-from3" multiple size="5">
            <option value="11.49">Product S KB</option>
            <option value="13.99">Product S Boost KB</option>
            <option value="16.49">Product M KB</option>
            <option value="18.99">Product M Boost KB</option>
            <option value="21.49">Product L KB</option>
            <option value="23.99">Product L Boost KB</option>
            <option value="31.49">Product XL KB</option>


        </select>
    </div>
    <div id="img4">
        <select class="select-from" name="selectfrom4" id="select-from4" multiple size="5">
            <option value="20.69">Product S SoHo</option>
            <option value="25.19">Product S Boost SoHo</option>
            <option value="29.69">Product M SoHo</option>
            <option value="34.19">Product M Boost SoHo</option>
            <option value="38.69">Product L SoHo</option>
            <option value="43.19">Product L Boost SoHo</option>
            <option value="56.69">Product XL SoHo</option>


        </select>
    </div>

    <a href="#" class="btn add">Add »</a>
    <a href="#" class="btn remove">« Remove</a>

    <select name="selectto" id="select-to" multiple size="5"></select>
    <table>
        <tbody>
        <tr>
        <td>99.99</td>
        <td>42.99</td>
        <td>32.99</td>
        <td>62.99</td>
        <td>47.99</td>
        <td>42.99</td>
        </tr>
        <tr>
        <td><input type="text" name="class" value="0" id="total"></td>
        <td><input type="text" name="class" value="0" id="total2"></td>
        <td><input type="text" name="class" value="0" id="total3"></td>
        <td><input type="text" name="class" value="0" id="total4"></td>
        <td><input type="text" name="class" value="0" id="total5"></td>
        <td><input type="text" name="class" value="0" id="total6"></td>
        </tr>
        <tr>
            <td><input type="text" name="class" value="0" id="split1"></td>
            <td><input type="text" name="class" value="0" id="split2"></td>
            <td><input type="text" name="class" value="0" id="split3"></td>
            <td><input type="text" name="class" value="0" id="split4"></td>
            <td><input type="text" name="class" value="0" id="split5"></td>
            <td><input type="text" name="class" value="0" id="split6"></td>
            </tr>
            <tr>
                <td><input type="text" name="class" value="0" id="split1x"></td>
                <td><input type="text" name="class" value="0" id="split2x"></td>
                <td><input type="text" name="class" value="0" id="split3x"></td>
                <td><input type="text" name="class" value="0" id="split4x"></td>
                <td><input type="text" name="class" value="0" id="split5x"></td>
                <td><input type="text" name="class" value="0" id="split6x"></td>
                </tr>
        </tbody>
        </table>
 
 
 

    <script>
        // Kategorie wählen
        // Muss global sein wenn wir die Eventlistener inline notieren
        function chooseCategory(idSelectFrom) {
            // Zunächst bei allen select-from die Klasse "active" löschen:
            $('.select-from').removeClass('active');
            // Jetzt bei der gewählten Kategorie die Klasse "active" setzen:
            $('#' + idSelectFrom).addClass('active')
        }
        $(() => {

            const $totalField = $('#total');
            const $totalFieldInt = $('#split1');
            const $totatFieldFract = $('#split1x');
            const calcTotal = () => {
                let total = $('#select-to option')
                    .map((i, el) => +el.value)
                    .get()
                    .reduce((a, b) => a + b, 0)
                return total > 0 ? total + 99 : total;
            };
            $('.btn').on('click', (e) => {
                e.preventDefault();
                const tgt = e.target.closest('.btn');
                if (!tgt) return; // not a button
                if (tgt.matches('.add')) {
                    // Bei allen selektierten Optionen im aktiven select-from:
                    // Klonen und in #select-to hinzu fügen:
                    $('.select-from.active option:selected').clone().appendTo('#select-to');
                }
                else {
                    // Button "Remove" wurde gedrückt:
                    $('#select-to option:selected').remove();
                }
                $totalField.val(calcTotal().toFixed(2));
                const splitted = calcTotal().toFixed(2).split('.');
                $totalFieldInt.val(splitted[0]);
                $totatFieldFract.val(splitted[1]);
             
            });
        });
    </script>

</body>

</html>

Sempervivum · 3 Januar 2024

1. ist sehr einfach: Du kannst mit dem Pluszeichen Strings verketten:

Code:

                $totalField.val(calcTotal().toFixed(2));
                const splitted = calcTotal().toFixed(2).split('.');
                $totalFieldInt.val(splitted[0] + ',');
                $totatFieldFract.val(splitted[1]);

2. Verstehe ich noch nicht richtig, muss ich mir genauer ansehen ...

Sempervivum · 3 Januar 2024

Zu 2.: Ich sehe da beim Berechnen der Gesamtsumme diesen Code:

Code:

return total > 0 ? total + 99 : total;

Vage Vermutung, wenn ich mir die Bilder ansehe: Ist der Cent-Betrag gleich 0 soll nichts passieren. Ist er größer als 0 soll er auf 99 erhöht werden.
49,00 --> 49,00
54,65 --> 54,99
72,33 --> 72,99
Richtig so?

boufier · 3 Januar 2024

Ist der Cent-Betrag gleich 0 soll nichts passieren. Ist er größer als 0 soll er auf 99 erhöht werden.

ist der Cent-Betrag gleich 0 soll zum Beispiel wie in der ersten spalte die Null durch 99.99 ersetzt werden. ist er grösser soller auf 99 erhöht werden. Dies gilt für alle weiteren Spalten seien. zum Beispiel Spalte 2: anstatt 99.99 dann 42.99

return total > 0 ? total + 42.99 : total;

Sempervivum · 3 Januar 2024

Das verstehe ich jetzt so, dass den Cent-Betrag generell auf "99" gesetzt werden soll?

boufier · 3 Januar 2024

generell nicht. die 99 bezieht sich auf die erste spallte, wo 99.99 steht. In der zweiten spalte steht 42.99 usw.

Sempervivum · 3 Januar 2024

Ich verstehe es immer noch nicht. Gib doch ein paar Beispiele mit ursprünglichem Wert und Wert nach Änderung, so wie ich in Posting #9.

boufier · 4 Januar 2024

ich habe eine Lösung gefunden. Schaue dir bitte den Code an. Evt. hast du eine bessere Lösung, wo der Javascript Code kürzer ist :)
html Code Teil 1:

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        select {
            min-width: 150px;
            min-height: 150px;
        }

        select.select-from {
            display: none;
        }

        select.select-from.active {
            display: block;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div>Tariftyp</div>
    <input type="radio" name="img" onclick="chooseCategory('select-from1')" checked>
    Neukunden
    <input type="radio" name="img" onclick="chooseCategory('select-from2')">
    Bestandskunden
    <input type="radio" name="img" onclick="chooseCategory('select-from3')">
    Junge Leute
    <input type="radio" name="img" onclick="chooseCategory('select-from4')">
    Selbständig
    <div id="img1">
        <select class="active select-from" name="selectfrom1" id="select-from1" multiple size="5">
            <option value="22.99">Product S</option>
            <option value="27.99">Product S Boost</option>
            <option value="32.99">Product M</option>
            <option value="37.99">Product M Boost</option>
            <option value="42.99">Product L</option>
            <option value="47.99">Product L Boost</option>
            <option value="62.99">Product XL</option>
          

        </select>
    </div>

    <div id="img2">
        <select class="select-from" name="selectfrom2" id="select-from2" multiple size="5">
            <option value="12.99">Product S YP</option>
            <option value="12.99">Product S Boost YP</option>
            <option value="22.99">Product M YP</option>
            <option value="22.99">Product M Boost YP</option>
            <option value="32.99">Product L YP</option>
            <option value="32.99">Product L Boost YP</option>
            <option value="52.99">Product XL YP</option>
    

        </select>
    </div>
    <div id="img3">
        <select class="select-from" name="selectfrom3" id="select-from3" multiple size="5">
            <option value="11.49">Product S KB</option>
            <option value="13.99">Product S Boost KB</option>
            <option value="16.49">Product M KB</option>
            <option value="18.99">Product M Boost KB</option>
            <option value="21.49">Product L KB</option>
            <option value="23.99">Product L Boost KB</option>
            <option value="31.49">Product XL KB</option>


        </select>
    </div>
    <div id="img4">
        <select class="select-from" name="selectfrom4" id="select-from4" multiple size="5">
            <option value="20.69">Product S SoHo</option>
            <option value="25.19">Product S Boost SoHo</option>
            <option value="29.69">Product M SoHo</option>
            <option value="34.19">Product M Boost SoHo</option>
            <option value="38.69">Product L SoHo</option>
            <option value="43.19">Product L Boost SoHo</option>
            <option value="56.69">Product XL SoHo</option>


        </select>
    </div>

    <a href="#" class="btn add">Add »</a>
    <a href="#" class="btn remove">« Remove</a>

    <select name="selectto" id="select-to" multiple size="5"></select>
    <table>
        <tbody>
        <tr>
        <td>99.99</td>
        <td>42.99</td>
        <td>32.99</td>
        <td>62.99</td>
        <td>47.99</td>
        <td>42.99</td>
        </tr>
        <tr>
        <td><input type="text" name="class" value="99.99" id="total1"></td>
        <td><input type="text" name="class" value="42.99" id="total2"></td>
        <td><input type="text" name="class" value="32.99" id="total3"></td>
        <td><input type="text" name="class" value="62.99" id="total4"></td>
        <td><input type="text" name="class" value="47.99" id="total5"></td>
        <td><input type="text" name="class" value="42.99" id="total6"></td>
        </tr>
        <tr>
            <td><input type="text" name="class" value="99," id="split1"></td>
            <td><input type="text" name="class" value="42," id="split2"></td>
            <td><input type="text" name="class" value="32," id="split3"></td>
            <td><input type="text" name="class" value="62," id="split4"></td>
            <td><input type="text" name="class" value="47," id="split5"></td>
            <td><input type="text" name="class" value="42," id="split6"></td>
            </tr>
            <tr>
                <td><input type="text" name="class" value="99" id="split1x"></td>
                <td><input type="text" name="class" value="99" id="split2x"></td>
                <td><input type="text" name="class" value="99" id="split3x"></td>
                <td><input type="text" name="class" value="99" id="split4x"></td>
                <td><input type="text" name="class" value="99" id="split5x"></td>
                <td><input type="text" name="class" value="99" id="split6x"></td>
                </tr>
        </tbody>
        </table>

boufier · 4 Januar 2024

html Code Teil 2:

HTML:

<script>

            // Kategorie wählen

            // Muss global sein wenn wir die Eventlistener inline notieren

            function chooseCategory(idSelectFrom) {

                // Zunächst bei allen select-from die Klasse "active" löschen:

                $('.select-from').removeClass('active');

                // Jetzt bei der gewählten Kategorie die Klasse "active" setzen:

                $('#' + idSelectFrom).addClass('active')

            }

            $(() => {

    

              

             //Spalte 1   

            const $totalField1 = $('#total1');

            const $totalFieldInt1 =  $('#split1');

            const $totatFieldFract1x = $('#split1x');

            const calcTotal1 = () => {

            let total1 = $('#select-to option')

                        .map((i, el) => +el.value)

                        .get()

                        .reduce((a, b) => a + b, 0)

                        return total1 > 0 ? total1 + 99.99 : 99.99;

            };

             //Spalte 2   

            const $totalField2 = $('#total2');

            const $totalFieldInt2 =  $('#split2');

            const $totatFieldFract2x = $('#split2x');

            const calcTotal2 = () => {

            let total2 = $('#select-to option')

                        .map((i, el) => +el.value)

                        .get()

                        .reduce((a, b) => a + b, 0)

                        return total2 > 0 ? total2 + 42.99 : 42.99;

            };

            //Spalte 3   

            const $totalField3 = $('#total3');

            const $totalFieldInt3 =  $('#split3');

            const $totatFieldFract3x = $('#split3x');

            const calcTotal3 = () => {

            let total3 = $('#select-to option')

                        .map((i, el) => +el.value)

                        .get()

                        .reduce((a, b) => a + b, 0)

                        return total3 > 0 ? total3 + 32.99 : 32.99;

            };

          

            //Spalte 4   

            const $totalField4 = $('#total4');

            const $totalFieldInt4 =  $('#split4');

            const $totatFieldFract4x = $('#split4x');

            const calcTotal4 = () => {

            let total4 = $('#select-to option')

                        .map((i, el) => +el.value)

                        .get()

                        .reduce((a, b) => a + b, 0)

                        return total4 > 0 ? total4 + 62.99 : 62.99;

            };

            //Spalte 5   

            const $totalField5 = $('#total5');

            const $totalFieldInt5 =  $('#split5');

            const $totatFieldFract5x = $('#split5x');

            const calcTotal5 = () => {

            let total5 = $('#select-to option')

                        .map((i, el) => +el.value)

                        .get()

                        .reduce((a, b) => a + b, 0)

                        return total5 > 0 ? total5 + 47.99 : 47.99;

            };

            //Spalte 6   

            const $totalField6 = $('#total6');

            const $totalFieldInt6 =  $('#split6');

            const $totatFieldFract6x = $('#split6x');

            const calcTotal6 = () => {

            let total6 = $('#select-to option')

                        .map((i, el) => +el.value)

                        .get()

                        .reduce((a, b) => a + b, 0)

                        return total6 > 0 ? total6 + 42.99 : 42.99;

            };

                $('.btn').on('click', (e) => {

                    e.preventDefault();

                    const tgt = e.target.closest('.btn');

                    if (!tgt) return; // not a button

                    if (tgt.matches('.add')) {

                        // Bei allen selektierten Optionen im aktiven select-from:

                        // Klonen und in #select-to hinzu fügen:

                        $('.select-from.active option:selected').clone().appendTo('#select-to');

                    }

                    else {

                        // Button "Remove" wurde gedrückt:

                        $('#select-to option:selected').remove();

                    }

                  

                    //Spalte 1

                    $totalField1.val(calcTotal1().toFixed(2));

                    const splitted1 = calcTotal1().toFixed(2).split('.');

                    $totalFieldInt1.val(splitted1[0] + ',');

                    $totatFieldFract1x.val(splitted1[1]);

                  

                    //Spalte 2

                    $totalField2.val(calcTotal2().toFixed(2));

                    const splitted2 = calcTotal2().toFixed(2).split('.');

                    $totalFieldInt2.val(splitted2[0] + ',');

                    $totatFieldFract2x.val(splitted2[1]);

                  

                    //Spalte 3

                    $totalField3.val(calcTotal3().toFixed(2));

                    const splitted3 = calcTotal3().toFixed(2).split('.');

                    $totalFieldInt3.val(splitted3[0] + ',');

                    $totatFieldFract3x.val(splitted3[1]);

                  

                    //Spalte 4

                    $totalField4.val(calcTotal4().toFixed(2));

                    const splitted4 = calcTotal4().toFixed(2).split('.');

                    $totalFieldInt4.val(splitted4[0] + ',');

                    $totatFieldFract4x.val(splitted4[1]);

                    //Spalte 5

                    $totalField5.val(calcTotal5().toFixed(2));

                    const splitted5 = calcTotal5().toFixed(2).split('.');

                    $totalFieldInt5.val(splitted5[0] + ',');

                    $totatFieldFract5x.val(splitted5[1]);

                    //Spalte 6

                    $totalField6.val(calcTotal6().toFixed(2));

                    const splitted6 = calcTotal6().toFixed(2).split('.');

                    $totalFieldInt6.val(splitted6[0] + ',');

                    $totatFieldFract6x.val(splitted6[1]);

                  

                });

            });

        </script>

</body>

</html>

Sempervivum · 4 Januar 2024

Da stehe ich jetzt genau so ratlos davor, es tauchen Zahlen auf und ich kann kein System darin erkennen. Ich bin nicht in das Skript eingestiegen, um das System daraus abzuleiten. Ich denke, es wäre besser, wenn Du mal den Hintergrund erklären würdest, was der Sinn bei der ganzen Sache ist.

Sempervivum · 4 Januar 2024

PS: Nach einem kurzen Blick in dein Skript ist mir schnell klar geworden, dass das System dahinter sehr einfach ist: Auf die Gesamtsumme soll jeweils der Wert in der ersten Zeile der Tabelle aufaddiert werden.
Und dein Vermutung hat sich bestätigt: Verwende ich eine Schleife, lässt sich das Ganze wieder stark reduzieren:

Code:

    <script>
        // Kategorie wählen
        // Muss global sein wenn wir die Eventlistener inline notieren
        function chooseCategory(idSelectFrom) {
            // Zunächst bei allen select-from die Klasse "active" löschen:
            $('.select-from').removeClass('active');
            // Jetzt bei der gewählten Kategorie die Klasse "active" setzen:
            $('#' + idSelectFrom).addClass('active')
        }

        const calcTotal = () => {
            let total = $('#select-to option')
                .map((i, el) => +el.value)
                .get()
                .reduce((a, b) => a + b, 0)
            return total;
        };
        const modifyTotal = (tbl) => {
            const
                // Anzahl der Spalten der Tabelle bereit stellen:
                nrCols = tbl.rows[0].cells.length,
                // Summe für die gewählten Elemente berechnen:
                total = calcTotal();
            // Über alle Spalten
            for (iCol = 0; iCol < nrCols; iCol++) {
                const
                    // Modifizierte Werte bereit stellen:
                    modifier = parseFloat(tbl.rows[0].cells[iCol].textContent),
                    modVal = (total > 0 ? total + modifier : modifier).toFixed(2),
                    splitted = modVal.split('.');
                // und in die Eingabefelder eintragen:
                tbl.rows[1].cells[iCol].querySelector('input').value = modVal;
                tbl.rows[2].cells[iCol].querySelector('input').value = splitted[0] + ',';
                tbl.rows[3].cells[iCol].querySelector('input').value = splitted[1];
            }
        }

        const
            // Tabelle bereit stellen;
            tbl = document.querySelector('table');
        $('.btn.add').on('click', (event) => {
            event.preventDefault();
            // Bei allen selektierten Optionen im aktiven select-from:
            // Klonen und in #select-to hinzu fügen:
            $('.select-from.active option:selected').clone().appendTo('#select-to');
            // Die modifizierten Werte in die Eingabefelder
            // in der Tabelle eintragen:
            modifyTotal(tbl);
        });
        $('.btn.remove').on('click', (event) => {
            // Button "Remove" wurde gedrückt:
            event.preventDefault();
            $('#select-to option:selected').remove();
            // Die modifizierten Werte in die Eingabefelder
            // in der Tabelle eintragen:
            modifyTotal(tbl);
        });
    </script>

Nur oberflächlich getestet, teste es bitte gründlich ob es das macht, was Du brauchst.

Dennoch wäre eine Erklärung willkommen, was der Sinn bei dem Ganzen ist.

Und, BTW, die Tabelle geht ziemlich in die Breite, ist vorgesehen, dass man sich das auch auf dem Handy ansieht?

boufier · 8 Januar 2024

Hallo @Sempervivum: leider bin ich krank geworden und kam nicht dazu alles zu testen. Ich melde mich die Tage und gebe Rückmeldung. Danke dir

Sempervivum · 8 Januar 2024

Dann erst Mal gute Besserung!

Produkte bei Auswahl hinzufügen

Neues Mitglied

Aktives Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

​

Neues Mitglied

Anhänge

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

Anhänge

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

​

Senior HTML'ler