Ein <select> aus einer Verkettung als Ausgabe darstellen

[wuppti]

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:

<?php 

<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> 

[admin]

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

[wuppti]

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

[wuppti]

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.

[admin]

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.

[admin]

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

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

[rzscout]

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

[wuppti]

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:

<?php 

<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> 

[ollelinse]

PHP-Code:

<?php 

            <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 Ausgabe, aber das bekomme ich nicht hin 

[wuppti]

PHP-Code:

<?php 

            <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 Ausgabe, aber das bekomme ich nicht hin