Javascript-forum
Ein <select> aus einer Verkettung als Ausgabe darstellen - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Ein <select> aus einer Verkettung als Ausgabe darstellen (/showthread.php?tid=1797)



Ein <select> aus einer Verkettung als Ausgabe darstellen - wuppti - 13.11.2022

Hallo zusammen,
meine Kenntnisse in Javascript sind als "extrem Beginner" einzustufen, von daher benötige ich bitte Hilfe oder Denkanstöße

Es geht um ein Formularscript, indem ich ein mehrfach verkettetes Javascript einsetzen möchte. das Grundgerüst ist nicht von mir, dies habe ich durch Sucherei im Netz gefunden und entsprechend bis zu dem heutigen Stand umgebaut. 
Jetzt stellt sich mir die Frage, wie ich den "Preis" nicht als <select> sondern als feste direkte Ausgabe in dem Formular darstelle.
Ich möchte also nicht in dem Preisfeld "bitte wählen" stehen haben sondern sofort den Preis, der ja jeder Anwendung zugeordnet ist. 
Wie bewerkstellige ich das ?
Versuche, in dem Formular mit <input> oder <ng-model> den Wert zu bekommen, sind kläglich gescheitert.

Ich bedanke mich bereits an dieser Stelle für alle Vorschläge oder Lösungen, die mein Problem fixen.

hier das script und im Anschluss das Formular als Teil Auszug

Code:
<noscript><div align="center" id="nojava">
Um den vollen Leistungsumfang unseres Shops nutzen zu können, aktivieren Sie bitte JavaScript in Ihren Browsereinstellungen.</div>
<br />
</noscript>
<script>
// Code steht in {...} wegen eines Frickl-Bugs
// Nun denkt der Linter, dies sei ein JSON-String und meckert auch. Bitte ignorieren!
{
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.forms.terminauswahl;
        const gutscheinCtrl = new GutscheinController(form.gutschein);
        const anwendungCtrl = new AnwendungController(form.anwendung, gutscheinCtrl);
        const terminCtrl = new TerminController(form.termin, anwendungCtrl);
        const preisCtrl = new PreisController(form.preis, terminCtrl);
        preisCtrl.addEventListener("change", preisChanged)
        gutscheinCtrl.mapData(data)
    
        function preisChanged(event) {
            let preisCtrl = event.target;
            let terminCtrl = preisCtrl.parentNode;
            let anwendungCtrl = terminCtrl.parentNode;
            let gutscheinCtrl = anwendungCtrl.parentNode;
            let ausgabe = document.getElementById('auswahl');
            ausgabe.textContent = preisCtrl.selectedKey != ""
                ?    `${gutscheinCtrl.selectedKey}:${gutscheinCtrl.selectedObject.name} / `+
                    `${anwendungCtrl.selectedKey}:${anwendungCtrl.selectedObject.thema} / ` +
                    `${terminCtrl.selectedKey}:${terminCtrl.selectedObject.zeit} / ` +
                    `${preisCtrl.selectedKey}:${preisCtrl.selectedObject.euro}`     :    "";
        }
    });

        class SelectionController extends EventTarget {
        constructor(selectElement, parentNode = null) {
            super();        // Pflicht: Konstruktor der Superklasse aufrufen
            if (!(selectElement instanceof HTMLSelectElement)) {
                throw new Error("Controller-Objekt benötigt ein select Element als ersten Parameter");
            }
            if (parentNode && !(parentNode instanceof SelectionController)) {
                throw new Error("Controller-Objekt benötigt einen SelectionController als zweiten Parameter");
            }

            this.selectElement = selectElement;
            this.parentNode = parentNode;

            this.selectElement.addEventListener("change", event => this._handleChangeEvent(event))
            if (parentNode) {
                parentNode.addEventListener("change", event => this.mapData(event.selectedObject));
            }
        }

        mapData(dataSource) {
            this.dataSource = dataSource;
   
            if (typeof this.getValueList == "function") {

                removeOptions(this.selectElement);

                const options = dataSource && this.getValueList(dataSource);
                if (!options || !options.length) {
                    setToDisabled(this.selectElement)
                } else {
                    setToEnabled(this.selectElement, options);
                }
            }

            this.selectElement.dispatchEvent(new Event("change"));

            function removeOptions(selectElement) {
                while (selectElement.length > 0)
                    selectElement.remove(0);
            }

            function setToDisabled(selectElement) {
                addOption(selectElement, "", "------");
                selectElement.disabled = true;
            }

            function setToEnabled(selectElement, options) {
                addOption(selectElement, "", "Bitte wählen:");

                for (var optionData of options) {
                    addOption(selectElement, optionData.value, optionData.text);
                }
                selectElement.disabled = false;
            }
   
            function addOption(selectElement, value, text) {
                let option = document.createElement("option");
                option.value = value;
                option.text = text
                selectElement.add(option);
            }
        }

        getValue(key) {
            throw new TypeError("Die abstrakte Methode 'getValue' wurde nicht implementiert!");
        }

        get selectedKey() {
            return this.selectElement.value;
        }
    
        get selectedObject() {
            return this.dataSource ? this.getValue(this.dataSource, this.selectElement.value) : null;
        }

        _handleChangeEvent(event) {
            let nodeChangeEvent = new Event("change");
            nodeChangeEvent.selectedObject = this.selectedObject;
            this.dispatchEvent(nodeChangeEvent);
        }
    }

    class GutscheinController extends SelectionController {
        constructor(selectElement) {
            super(selectElement, null);
        }

        getValue(quelle, gutscheinId) {
            return quelle.find(gutschein => gutschein.id == gutscheinId); 
        }
    }

    class AnwendungController extends SelectionController {
        constructor(selectElement, parentController) {
        super(selectElement, parentController);
        }
        getValueList(gutschein) {
            return gutschein.massagen.map(anwendung => ({ value: anwendung.nummer, text: anwendung.thema }));
        }
        getValue(gutschein, anwendungNr) {
            return gutschein.massagen.find(anwendung => anwendung.nummer == anwendungNr);
        }
    }

    class TerminController extends SelectionController {
        constructor(selectElement, parentController) {
            super(selectElement, parentController);
        }
        getValueList(anwendung) {
            return anwendung.termine.map(termin => ({ value: termin.id, text: termin.zeit }));
        }
        getValue(anwendung, terminId) {
            return anwendung.termine.find(termin => termin.id == terminId);
        }
    }
   class PreisController extends SelectionController {
        constructor(selectElement, parentController) {
            super(selectElement, parentController);
        }
        getValueList(termin) {
            return termin.preise.map(preis => ({
                value: preis.id,
                text: preis.euro
            }));
        }
        getValue(termin, preisId) {
            return termin.preise.find(preis => preis.id == preisId);
        }
    }
}
var data = [
    {    id: "Massage",
        name: "Massage-Angebote",
        massagen: [
            {    nummer: "Thai Hand-, oder Kopf/Gesichtsmassage",
                thema: "Thai Hand-, oder Kopf/Gesichtsmassage",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "30,00 €", euro: "30,00 €" }
                                            ]
                                    }
                         ]
            },
            {    nummer: "Thai Schulter-/Nackenmassage",
                thema: "Thai Schulter-/Nackenmassage",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "30,00 €", euro: "30,00 €" }
                                            ]
                                    },
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "49,00 €", euro: "49,00 €" }
                                            ]
                                    }
                ]
            },
        ]
    }
];
</script>


PHP-Code:
<form action="./php/gutschein.php" method="post" name="auswahl">
    <
form class="needs-validation" novalidate>
    <
div class="form-row">
        <
div class="form-group col-md-12">
            <
label class="control-label">Gutschein für:
                <
select id="gutschein" name="Gutschein" class="form-control" value="" required>
                    <
option value="">Bitte wählen:</option>
                    <
option value="Massage">Massage-Angebote</option>
                    <
option value="xxxx">xxx</option>
                    <
option value="yyyy">yyyy</option>
                    <
option value="zzzz">zzzz</option>
                </
select>
            </
label>
            <
label class="control-label">Anwendung:
                <
select id="anwendung" name="Anwendung" class="form-control" disabled value="" required>
                    <
option value="">------</option>
                </
select>
            </
label>
            <
label class="control-label">Dauer:
                <
select id="termin" name="Dauer" class="form-control" disabled value="" type="hidden">
                    <
option value="">------</option>
                </
select>
            </
label>
                        <label class="control-label">Preis:
                <
select id="preis" name="Preis" class="form-control" disabled value="" type="hidden">
                    <
option value="">------</option>
                </
select>
            </
label>
        </
div>
    </
div>
</
form>
</
form



RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - admin - 16.11.2022

So ganz verstehe ich das nicht.
Erstens weiß ich nicht was du für eine Bibliothek du nutzt / oder Plugins

Wie ich das verstehe, kannst du bei normalen Vanilla Javascript so ein select Feld auslesen und irgendwo wieder anzeigen lassen
Code:
<select id="tags">
  <option value="body">body</option>
      <option value="div">div</option>
    <option value="p">p</option>
  </select>
<output>
</output>
<script>
var select_elem=document.getElementById('tags');

select_elem.addEventListener('change',function(e,ix){
document.getElementsByTagName('output')[0].innerHTML=this.value;
})
</script>

Falls ich dich jetzt falsch verstanden habe, dann sorry


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - wuppti - 19.11.2022

vielen Dank für die Antwort, ich werde jetzt am Wochenende versuchen, diesen Lösungsansatz umzusetzen
Beste Grüße, Michael


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - wuppti - 21.11.2022

(16.11.2022, 22:44)admin schrieb: So ganz verstehe ich das nicht.
Erstens weiß ich nicht was du für eine Bibliothek du nutzt  / oder Plugins

Wie ich das verstehe, kannst du bei normalen Vanilla Javascript so ein select Feld auslesen und irgendwo wieder anzeigen lassen
Code:
<select id="tags">
  <option value="body">body</option>
      <option value="div">div</option>
    <option value="p">p</option>
  </select>
<output>
</output>
<script>
var select_elem=document.getElementById('tags');

select_elem.addEventListener('change',function(e,ix){
document.getElementsByTagName('output')[0].innerHTML=this.value;
})
</script>

Falls ich dich jetzt falsch verstanden habe, dann sorry
Hallo nochmal ,
ich habe am Wochenende den Code versucht umzusetzen und dabei festgestellt, das ich mich wahrscheinlich in der Ausgangsfragestellung nicht richtig ausgedrückt habe. 
Das Auslesen, so wie es mir oben vorgeschlagen wurde, ist eher nicht mein "Problem"
Ich versuche noch einmal darzustellen, was ich versuche:
In dem Formular, das ich gepostet habe sind Verkettungen, die entsprechend der Wahl des Users weitere " in Abhängigkeit" befindliche Möglichkeiten bieten. Das soll auch so sein, bis es dann zum Preis kommt, der auch in einer Abhängigkeit der zuvor ausgewählten Möglichkeiten steht. Nur möchte ich da kein select Feld mehr sondern eine Ausgabe gemäß dem Schema:
User wählt erst den Gutschein, dann die Anwendung, dann die Dauer und JETZT SOLL DER PREIS angezeigt werden, der dieser Anwendung mit der gewählten Dauer zugeordnet ist.
Als select funktioniert das auch, aber es macht keinen Sinn einen zugeordneten Preis zu selektieren.


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - admin - 22.11.2022

Verstehe ich immer noch nicht ganz. Kannst du das mal online stellen, damit man sieht was da passiert?
Ich verstehe das so das du die selects alle auslesen willst und dann den Preis ausgeben willst. Aber das hatten wir ja schon.

Bitte online stellen oder einen kompletten Code posten, den ich nur kopieren muss, um ihn dann selber zu testen.


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - admin - 22.11.2022

Oder meinst du sowas
https://basti1012.bplaced.net/index.php?ordner=php&id=36

Halt nur mit mehreren seleczs und zum schliss halt den Preis berechnen, die man in den selects ausgefült hat


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - rzscout - 22.11.2022

Hi wuppti,
ja ich habe für dich eine passende Lösung gebastelt.

Ich glaube du meinst so etwas:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamische Auswahl</title>
    <style>

    </style>
    <script>
        var dynamic;
        var anw1 = ['option1','option2','option3','option4'];
        var anw2 = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
        var dauer1 = ['option1', 'option2', 'option3', 'option4'];
        var dauer2 = ['10min', '15min', '30min', '60min'];
        document.addEventListener('DOMContentLoaded', init);
        function init() {
            dynamic = document.getElementById("dynamic");
            let gutschein = document.querySelector('#gutschein');
            gutschein.addEventListener('input', function() {
                let eingabe = gutschein.value;
                switch (eingabe) {
                    case 'massage':
                    case 'xxx':
                        removeElements();
                        addanwendung();
                        adddauer();
                    break;
                    case 'empty':
                        removeElements();
                    break;
                    case 'yyy':
                    case 'zzz':
                        removeElements();
                    break;
                    default:
                        removeElements();
                }
            });
        }
        function removeElements() {
            const myNode = dynamic;
            while (myNode.firstChild) {
                let myNodeChild = myNode.lastChild;
                if(myNodeChild.hasChildNodes()) {
                    while(myNodeChild.firstChild) {
                        myNodeChild.removeChild(myNodeChild.lastChild);
                    }
                } else {
                    myNode.removeChild(myNode.lastChild);
                }               
            }
        }
        function addanwendung() {
            let select = document.createElement('select');
            select.setAttribute('name', 'anwendung');
            select.setAttribute('id', 'anwendung');
            dynamic.appendChild(select);
            anw1.forEach((element, index) => {
                let option = document.createElement('option');
                option.setAttribute('value', element);
                option.textContent = anw2[index];
                select.appendChild(option);
            });
            select.firstChild.selected = 'selected';
        }
        function adddauer() {
            let select = document.createElement('select');
            select.setAttribute('name', 'dauer');
            select.setAttribute('id', 'dauer');
            dynamic.appendChild(select);
            dauer1.forEach((element, index) => {
                let option = document.createElement('option');
                option.setAttribute('value', element);
                option.textContent = dauer2[index];
                select.appendChild(option);
            });
        }
    </script>
</head>
<body>
    <form action="./php/gutschein.php" method="post" name="auswahl">
        <label for="gutschein">Gutschein für:</label>
        <select name="gutschein" id="gutschein">
            <option value="empty">Bitte wählen</option>
            <option value="massage">Massage-Angebot</option>
            <option value="xxx">xxx</option>
            <option value="yyy">yyy</option>
            <option value="zzz">zzz</option>
        </select>
        <div id="dynamic">
           
        </div>       
    </form>
</body>
</html>

Wenn du weitere Fragen hast oder wenn du etwas anderes wolltest einfach hier in den Thread schreiben.

VG
rzscout


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - wuppti - 22.11.2022

(16.11.2022, 22:44)admin schrieb: Verstehe ich immer noch nicht ganz. Kannst du das mal online stellen, damit man sieht was da passiert?
Ich verstehe das so das du die selects alle auslesen willst und dann den Preis ausgeben willst. Aber das hatten wir ja schon.

Bitte online stellen oder einen kompletten Code posten, den ich nur kopieren muss, um ihn dann selber zu testen.

Hallo,
gerne stelle ich den kompletten Code noch einmal hier rein.
Das Formular (geschrumpft auf den Teil, um den es geht) ist folgendes:

PHP-Code:
<div id="rex-yform" class="yform">

    <form action="./php/gutschein.php" method="post" name="terminauswahl">
    <form class="needs-validation" novalidate>
    <div class="form-row">
        <div class="form-group col-md-12">
            <label class="control-label">Gutschein für:
                <select id="gutschein" name="Gutschein" class="form-control" value="" required>
                    <option value="">Bitte wählen:</option>
                    <option value="Massage">Massage-Angebote</option>
                    <option value="LiebscherBracht">Liebscher Bracht</option>
                    <option value="SPA">SPA-Angebote</option>
                    <option value="Wert">Wertgutschein</option>
                </select>
            </label>
            <label class="control-label">Anwendung:
                <select id="anwendung" name="Anwendung" class="form-control" disabled value="" required>
                    <option value="">------</option>
                </select>
            </label>
            <label class="control-label">Dauer/Preis:
                <select id="termin" name="Dauer" class="form-control" disabled value="" required">
                    <option value="">------</option>
                </select>
            </label>
            <label class="
control-label">Preis:
                <select id="
preis" name="Preis" class="form-control" disabled value="" type="hidden">
                    <option value="">------</option>
                </select>
            </label>
        </div>
    </div>
   
    </form>
    </form>
</div>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script> 
Das Javasript in voller Länge ist wie folgt dieses:
Code:
<script>
{
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.forms.terminauswahl;
        const gutscheinCtrl = new GutscheinController(form.gutschein);
        const anwendungCtrl = new AnwendungController(form.anwendung, gutscheinCtrl);
        const terminCtrl = new TerminController(form.termin, anwendungCtrl);
        const preisCtrl = new PreisController(form.preis, terminCtrl);
        preisCtrl.addEventListener("change", preisChanged)
        gutscheinCtrl.mapData(data)
   
        function preisChanged(event) {
            let preisCtrl = event.target;
            let terminCtrl = preisCtrl.parentNode;
            let anwendungCtrl = terminCtrl.parentNode;
            let gutscheinCtrl = anwendungCtrl.parentNode;
            let ausgabe = document.getElementById('auswahl');
            ausgabe.textContent = preisCtrl.selectedKey != ""
                ?    `${gutscheinCtrl.selectedKey}:${gutscheinCtrl.selectedObject.name} / `+
                    `${anwendungCtrl.selectedKey}:${anwendungCtrl.selectedObject.thema} / ` +
                    `${terminCtrl.selectedKey}:${terminCtrl.selectedObject.zeit} / ` +
                    `${preisCtrl.selectedKey}:${preisCtrl.selectedObject.euro}`     :    "";
        }
    });

    class SelectionController extends EventTarget {
        constructor(selectElement, parentNode = null) {
            super();        // Pflicht: Konstruktor der Superklasse aufrufen
            if (!(selectElement instanceof HTMLSelectElement)) {
                throw new Error("Controller-Objekt benötigt ein select Element als ersten Parameter");
            }
            if (parentNode && !(parentNode instanceof SelectionController)) {
                throw new Error("Controller-Objekt benötigt einen SelectionController als zweiten Parameter");
            }

            this.selectElement = selectElement;
            this.parentNode = parentNode;

            this.selectElement.addEventListener("change", event => this._handleChangeEvent(event))
            if (parentNode) {
                parentNode.addEventListener("change", event => this.mapData(event.selectedObject));
            }
        }

       
        mapData(dataSource) {
           
            this.dataSource = dataSource;
   
           
            if (typeof this.getValueList == "function") {

                removeOptions(this.selectElement);

                const options = dataSource && this.getValueList(dataSource);
                if (!options || !options.length) {
                    setToDisabled(this.selectElement)
                } else {
                    setToEnabled(this.selectElement, options);
                }
            }

            this.selectElement.dispatchEvent(new Event("change"));

            function removeOptions(selectElement) {
                while (selectElement.length > 0)
                    selectElement.remove(0);
            }

            function setToDisabled(selectElement) {
                addOption(selectElement, "", "------");
                selectElement.disabled = true;
            }

            function setToEnabled(selectElement, options) {
                addOption(selectElement, "", "Bitte wählen:");

                for (var optionData of options) {
                    addOption(selectElement, optionData.value, optionData.text);
                }
                selectElement.disabled = false;
            }
   
            function addOption(selectElement, value, text) {
                let option = document.createElement("option");
                option.value = value;
                option.text = text
                selectElement.add(option);
            }
        }

        getValue(key) {
            throw new TypeError("Die abstrakte Methode 'getValue' wurde nicht implementiert!");
        }

        get selectedKey() {
            return this.selectElement.value;
        }
   
        get selectedObject() {
            return this.dataSource ? this.getValue(this.dataSource, this.selectElement.value) : null;
        }

        _handleChangeEvent(event) {
            let nodeChangeEvent = new Event("change");
            nodeChangeEvent.selectedObject = this.selectedObject;
            this.dispatchEvent(nodeChangeEvent);
        }
    }

    class GutscheinController extends SelectionController {
        constructor(selectElement) {
            super(selectElement, null);
        }

        getValue(quelle, gutscheinId) {
            return quelle.find(gutschein => gutschein.id == gutscheinId); 
        }
    }

    class AnwendungController extends SelectionController {
        constructor(selectElement, parentController) {
        super(selectElement, parentController);
        }
        getValueList(gutschein) {
            return gutschein.massagen.map(anwendung => ({ value: anwendung.nummer, text: anwendung.thema }));
        }
        getValue(gutschein, anwendungNr) {
            return gutschein.massagen.find(anwendung => anwendung.nummer == anwendungNr);
        }
    }

    class TerminController extends SelectionController {
        constructor(selectElement, parentController) {
            super(selectElement, parentController);
        }
        getValueList(anwendung) {
            return anwendung.termine.map(termin => ({ value: termin.id, text: termin.zeit }));
        }
        getValue(anwendung, terminId) {
            return anwendung.termine.find(termin => termin.id == terminId);
        }
    }
   class PreisController extends SelectionController {
        constructor(selectElement, parentController) {
            super(selectElement, parentController);
        }
        getValueList(termin) {
            return termin.preise.map(preis => ({
                value: preis.id,
                text: preis.euro
            }));
        }
        getValue(termin, preisId) {
            return termin.preise.find(preis => preis.id == preisId);
        }
    }
}
var data = [
    {    id: "Massage",
        name: "Massage-Angebote",
        massagen: [
            {    nummer: "Thai Hand-, oder Kopf/Gesichtsmassage",
                thema: "Thai Hand-, oder Kopf/Gesichtsmassage",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "30,00 €", euro: "30,00 €" }
                                            ]
                                    }
                         ]
            },
            {    nummer: "Thai Schulter-/Nackenmassage",
                thema: "Thai Schulter-/Nackenmassage",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "30,00 €", euro: "30,00 €" }
                                            ]
                                    },
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "49,00 €", euro: "49,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Thai Fuß- oder Rückenmassage",
                thema: "Thai Fuß- oder Rückenmassage",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "30,00 €", euro: "30,00 €" }
                                            ]
                                    },
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "49,00 €", euro: "49,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Traditionelle Thaimassage oder Öl/Aromamassage",
                thema: "Traditionelle Thaimassage oder Öl/Aromamassage",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "30,00 €", euro: "30,00 €" }
                                            ]
                                    },
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "49,00 €", euro: "49,00 €" }
                                            ]
                                    },
                    { id: "90 min", zeit: "90 min",
                                preise: [
                                    { id: "69,00 €", euro: "69,00 €" }
                                            ]
                                    },
                    { id: "120 min", zeit: "120 min",
                                preise: [
                                    { id: "89,00 €", euro: "89,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Tok Sen Massage (Hammermassage)",
                thema: "Tok Sen Massage (Hammermassage)",
                termine: [
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "49,00 €", euro: "49,00 €" }
                                            ]
                                    },
                    { id: "90 min", zeit: "90 min",
                                preise: [
                                    { id: "69,00 €", euro: "69,00 €" }
                                            ]
                                    },
                    { id: "120 min", zeit: "120 min",
                                preise: [
                                    { id: "89,00 €", euro: "89,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Thai Kräuterstempel- oder Hot Stone Massage",
                thema: "Thai Kräuterstempel- oder Hot Stone Massage",
                termine: [
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "55,00 €", euro: "55,00 €" }
                                            ]
                                    },
                    { id: "90 min", zeit: "90 min",
                                preise: [
                                    { id: "78,00 €", euro: "78,00 €" }
                                            ]
                                    },
                    { id: "120 min", zeit: "120 min",
                                preise: [
                                    { id: "99,00 €", euro: "99,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Thai Vital Massage (Kombination verschiedener Techniken",
                thema: "Thai Vital Massage (Kombination verschiedener Techniken",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "35,00 €", euro: "35,00 €" }
                                            ]
                                    },
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "55,00 €", euro: "55,00 €" }
                                            ]
                                    },
                    { id: "90 min", zeit: "90 min",
                                preise: [
                                    { id: "78,00 €", euro: "78,00 €" }
                                            ]
                                    },
                    { id: "120 min", zeit: "120 min",
                                preise: [
                                    { id: "99,00 €", euro: "99,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Partnermassage (pro Paar)",
                thema: "Partnermassage (pro Paar)",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "60,00 €", euro: "60,00 €" }
                                            ]
                                    },
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "93,00 €", euro: "93,00 €" }
                                            ]
                                    },
                    { id: "90 min", zeit: "90 min",
                                preise: [
                                    { id: "138,00 €", euro: "138,00 €" }
                                            ]
                                    },
                    { id: "120 min", zeit: "120 min",
                                preise: [
                                    { id: "178,00 €", euro: "178,00 €" }
                                            ]
                                    }
                ]
            }
        ]
    },
        {    id: "LiebscherBracht",
        name: "Liebscher & Bracht",
        massagen: [
            {    nummer: "Schmerztherapie",
                thema: "Schmerztherapie",
                termine: [
                    { id: "60 min", zeit: "60 min",
                                preise: [
                                    { id: "xx €", euro: "xx €" }
                                            ]
                                    },
                    { id: "75 min", zeit: "75 min",
                                preise: [
                                    { id: "xx €", euro: "xx €" }
                                            ]
                                    },
                    { id: "90 min", zeit: "90 min",
                                preise: [
                                    { id: "xx €", euro: "xx €" }
                                            ]
                                    }
                ]
            }
           ]
    },
    {    id: "SPA",
        name: "SPA-Wellness",
        massagen: [
            {    nummer: "Infrarot Wärmekabine",
                thema: "Infrarot Wärmekabine",
                termine: [
                    { id: "30 min", zeit: "30 min",
                                preise: [
                                    { id: "15,00 €", euro: "15,00 €" }
                                            ]
                                    },
                    { id: "45 min", zeit: "45 min",
                                preise: [
                                    { id: "20,00 €", euro: "20,00 €" }
                                            ]
                                    }
                ]
            },
            {    nummer: "Infrarot Wärmekabine SPA",
                thema: "Infrarot Wärmekabine SPA",
                termine: [
                    { id: "55 min 43,00 €", zeit: "55 min 43,00 €" },
                    { id: "85 min 60,00 €", zeit: "85 min 60,00 €" },
                    { id: "115 min 80,00 €", zeit: "115 min 80,00 €" },
                    { id: "145 min 100,00 €", zeit: "145 min 100,00 €" }
                ]
            },
            {    nummer: "Infrarot Wärmekabine THAI SPA",
                thema: "Infrarot Wärmekabine THAI SPA",
                termine: [
                    { id: "85 min 60,00 €", zeit: "85 min 60,00 €" },
                    { id: "115 min 80,00 €", zeit: "115 min 80,00 €" },
                    { id: "145 min 100,00 €", zeit: "145 min 100,00 €" }
                ]
                        },
            {    nummer: "Infrarot Wärmekabine THAI SPA DELUXE",
                thema: "Infrarot Wärmekabine THAI SPA DELUXE",
                termine: [
                    { id: "85 min 67,00 €", zeit: "85 min 67,00 €" },
                    { id: "115 min 87,00 €", zeit: "115 min 87,00 €" },
                    { id: "145 min 107,00 €", zeit: "145 min 107,00 €" }
                ]
                },
                        {    nummer: "DREAM DAY ",
                thema: "DREAM DAY",
                termine: [
                    { id: "180-210 min 155,00 €", zeit: "ca. 180-210 min 155,00 €" }
                ]
                },
                        {    nummer: "DEAM DAY Partner",
                thema: "DREAM DAY Partner",
                termine: [
                    { id: "180-210 min 299,00 €", zeit: "ca. 180-210 min 299,00 €" }
                ]
                }
          ]
    }
];

</script>

Wenn man in dem Formular die einzelnen Bereiche auswählt ist jeder Kombination ein Preis zugeordnet und der soll erscheinen, sobald man die Dauer der vorher ausgesuchten Anwendung anklickt. Dieses Formularfeld Preis soll also kein Select Feld sein sondern eben eine Ausgabe, aber das bekomme ich nicht hin

Der Ansatz von rzscout ist klasse, jedoch fehlt mir da auch der Preis und vor allem hat nicht jede Anwendung jedes Zeitfenster (es ist leider komplizierter ) 
Es gibt Anwendung mit einem Zeitfenster manche haben zwei, manche drei und einige vier, das ist in dem Javascript alles berücksichtigt.

Ich hoffe das mein Wunsch jetzt deutlicher geworden ist und bedankle mich erneut bei allen, die mir bei der Lösung bzw. Umsetzung behilflich sind.

Beste Grüße, Michael


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - ollelinse - 23.11.2022

PHP-Code:
            <label class="control-label">Preis:
                <select id="preis" name="Preis" class="form-control" disabled value="" type="hidden">
                    <option value="">------</option>
                </select>
            </label>

Dieses Formularfeld Preis soll also kein Select Feld sein sondern eben eine Ausgabeaber das bekomme ich nicht hin 

Und warum ist jetzt der Preis als Select-Feld programmiert?


RE: Ein <select> aus einer Verkettung als Ausgabe darstellen - wuppti - 23.11.2022

(23.11.2022, 09:13)ollelinse schrieb:
PHP-Code:
            <label class="control-label">Preis:
                <select id="preis" name="Preis" class="form-control" disabled value="" type="hidden">
                    <option value="">------</option>
                </select>
            </label>

Dieses Formularfeld Preis soll also kein Select Feld sein sondern eben eine Ausgabeaber das bekomme ich nicht hin 

Und warum ist jetzt der Preis als Select-Feld programmiert?

Hallo ollelinse,

deine Frage ist sicher berechtigt und meine Antwort darauf stößt wahrscheinlich bei dem ein oder anderen auf Unverständnis.

Der Preis ist als Select Feld programmiert, da ich dieses Script in einer etwas anderen Form aus dem wiki.selfhtml.org übernommen und für mich erweitert habe und irgendwie froh war, es für meine Bedürfnisse umzuändern. Ich bin absolut kein Programmierer, verstehe in Ansätzen, was in dem Script passiert, aber einfach noch viel zu wenig, um es selbst hinzu bekommen. Von daher brauche ich eben diese Hilfe hier im Forum.

Beste Grüße, Michael