Mit select <a> inhalt ändern


Guten Tag
Ich versuche zur zeit mit einem select Element den Inhalt eines <a> zu ändern:
HTML:
<select class="shop-box select" name="cpu">
                <option selected>Cpu</option>
                <option value="cpu-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="cpu-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="cpu-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>


<a class="cpu">-</a><br>
ich hoffe sie verstehen was ich meine und können mir helfen.
 

Sempervivum

Erfahrenes Mitglied
Bin mir nicht sicher: Du möchtest den Wert des value-Attributes, z. B. "cpu-1", in das a-Tag übertragen?
Dann sollte es so funktionieren:
Code:
    <select id="shop-box" name="cpu">
        <option value="" selected>Cpu</option>
        <option value="cpu-1">LOW BUDGET (UNTER 1000.-CHF)</option>
        <option value="cpu-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
        <option value="cpu-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
    </select>
    <a id="cpu">-</a><br>
    <script>
        document.getElementById("shop-box").addEventListener("change", function () {
            var val = this.options[this.selectedIndex].value;
            cpu.innerHTML = val;
        })
    </script>
 
Zuletzt bearbeitet:
Heii danke für die schnelle antwort.
Von der idee her haste mich schon mal verstanden ich möchte so eben einen pc creator basteln:
Code:
<div class="content">
        <form action="php/contact.php" method="post">   
            <select class="shop-box select" name="case">
                <option selected>Case</option>
                <option value="case-1"><a>GAMING</a></option>
                <option value="case-2"><a>RENDERING</a></option>
                <option value="case-3"><a>GAME & RENDERING</a></option>
                <option value="case-4"><a>SONSTIGES (BITTE IM TEXT FELD BESCHREIBEN)</a></option>
            </select>
            <select class="shop-box select" name="mainboard">
                <option selected>Mainboard</option>
                <option value="mainboard-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="mainboard-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="mainboard-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box select" name="cpu">
                <option selected>Cpu</option>
                <option value="cpu-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="cpu-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="cpu-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box-more select" name="ram">
                <option selected>Ram</option>
                <option value="ram-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="ram-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="ram-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="select anzahl" name="ram-anzahl">
                <option selected>Anzahl</option>
                <option value="r1">1x</option>
                <option value="r2">2x</option>
                <option value="r3">4x</option>
                <option value="r4">6x(fals möglich)</option>
                <option value="r5">8x(fals möglich)</option>
            </select>
            <select class="shop-box select" name="system">
                <option selected>Festplatte System</option>
                <option value="sys-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="sys-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="sys-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box-more select" name="daten">
                <option selected>Festplatte Daten</option>
                <option value="dat-1">1x</option>
                <option value="dat-2">2x</option>
                <option value="dat-3">3x(fals möglich)</option>
            </select>
            <select class="select anzahl" name="daten-anzahl">
                <option selected>Anzahl</option>
                <option value="daten-1">1x</option>
                <option value="daten-2">2x</option>
                <option value="daten-3">3x(fals möglich)</option>
            </select>
            <select class="shop-box-more se lect" name="gpu">
                <option selected>Grafikkarte</option>
                <option value="gpu-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="gpu-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="gpu-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="select anzahl" name="gpu-anzahl">
                <option selected>Anzahl</option>
                <option value="gra-1">1x</option>
                <option value="gra-2">2x (fals möglich)</option>
                <option value="gra-3">3x (fals möglich)</option>
            </select>
            <select class="shop-box select" name="netzteil">
                <option selected>Netzteil</option>
                <option value="netz-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="netz-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="netz-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box-more select" name="cooler">
                <option selected>Kühlung</option>
                <option value="air">Luftkühlung</option>
                <option value="aoi">All in one Wakü</option>
                <option value="cw">Costum Wakü (in "weiters" erläutern)</option>
            </select>
            <select class="select anzahl" name="cooler">
                <option selected>Anzahl lüfter</option>
                <option value="2x">2x</option>
                <option value="3x">3x</option>
                <option value="2+k">2x + Radiator (kleinster)</option>
                <option value="2+g">2x + Radiator (grösster)</option>
                <option value="3+k">3x + Radiator (kleinster)</option>
                <option value="3+g">3x + Radiator (grösster)</option>
            </select>
            <textarea class="text-box message" type="text" name="text" placeholder="WEITERE WÜNSCHE..."/>
            <div class="preis">
                <h1>Dein Setup</h1><hr>
                    <div>
                        <a class="case">-</a><br>
                        <a class="mainboard">-</a><br>
                        <a class="cpu">-</a><br>
                        <a class="ram">-</a><a class="an r">-</a><br>
                        <a class="sys">-</a><br>
                        <a class="dat">-</a><a class="an daten">-</a><br>
                        <a class="gpu">-</a><a class="an gra">-</a><br>
                        <a class="netz">-</a><br>
                        <a class="küh">-</a><a class="an cooler">-</a>
                    </div><hr>
                <h3>Aktueller Preis:</h3>
                <a class="preiss-gesamt">- .-</a>
            </div>
            <input class="text-box submit" name="submit" type="submit" value="SENDEN">
    </form>
</div>
       
http://modpc.spitzinet.ch/ hier können sie das provisorisch mal ansehen.


nun sollen die - durch das jeweilige produkt der jeweiligen gruppe ersetzt werden um so eine kleine übersicht zu schaffen.

der text im code ist antürlich nur platzhalter
 

Sempervivum

Erfahrenes Mitglied
So etwas hatte ich mir fast schon gedacht: Es gibt mehrere selects und das Script muss alle abdecken. Dies tut es:
Code:
    <div class="content">
        <form action="php/contact.php" method="post">
            <select class="shop-box select" name="case">
                <option selected>Case</option>
                <option value="case-1"><a>GAMING</a></option>
                <option value="case-2"><a>RENDERING</a></option>
                <option value="case-3"><a>GAME & RENDERING</a></option>
                <option value="case-4"><a>SONSTIGES (BITTE IM TEXT FELD BESCHREIBEN)</a></option>
            </select>
            <select class="shop-box select" name="mainboard">
                <option selected>Mainboard</option>
                <option value="mainboard-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="mainboard-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="mainboard-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <textarea class="text-box message" type="text" name="text" placeholder="WEITERE WÜNSCHE..."></textarea>
            <div class="preis">
                <h1>Dein Setup</h1><hr>
                <div>
                    <a id="case">-</a><br>
                    <a id="mainboard">-</a><br>
                    <a id="cpu">-</a><br>
                    <a id="ram">-</a><a class="an r">-</a><br>
                    <a id="sys">-</a><br>
                    <a id="dat">-</a><a class="an daten">-</a><br>
                    <a id="gpu">-</a><a class="an gra">-</a><br>
                    <a id="netz">-</a><br>
                    <a id="kueh">-</a><a class="an cooler">-</a>
                </div><hr>
                <h3>Aktueller Preis:</h3>
                <a class="preiss-gesamt">- .-</a>
            </div>
            <input class="text-box submit" name="submit" type="submit" value="SENDEN">
        </form>
    </div>
    <script>
        document.querySelectorAll(".shop-box").forEach(function(ele, idx) {
            ele.addEventListener("change", function () {
                var val = this.options[this.selectedIndex].value;
                document.getElementById(ele.getAttribute("name")).innerHTML = val;
            });
        });
    </script>
Habe die selects etwas gekürzt.
Beachte: textarea braucht ein Endetag.
 
heii das klapst bis jetzt ganz gut aller ding nur bis CPU der Rest nicht habe mal die Unterschiede die ich gesehen habe angepasst.
Code:
<div class="content">
        <form action="php/contact.php" method="post">    
            <select class="shop-box select" name="case">
                <option selected>Case</option>
                <option value="case-1"><a>GAMING</a></option>
                <option value="case-2"><a>RENDERING</a></option>
                <option value="case-3"><a>GAME & RENDERING</a></option>
                <option value="case-4"><a>SONSTIGES (BITTE IM TEXT FELD BESCHREIBEN)</a></option>
            </select>
            <select class="shop-box select" name="mainboard">
                <option selected>Mainboard</option>
                <option value="mainboard-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="mainboard-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="mainboard-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box select" name="cpu">
                <option selected>Cpu</option>
                <option value="cpu-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="cpu-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="cpu-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box-more select" name="ram">
                <option selected>Ram</option>
                <option value="ram-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="ram-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="ram-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="select anzahl" name="ram-anzahl">
                <option selected>Anzahl</option>
                <option value="r1">1x</option>
                <option value="r2">2x</option>
                <option value="r3">4x</option>
                <option value="r4">6x(fals möglich)</option>
                <option value="r5">8x(fals möglich)</option>
            </select>
            <select class="shop-box select" name="system">
                <option selected>Festplatte System</option>
                <option value="sys-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="sys-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="sys-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box-more select" name="daten">
                <option selected>Festplatte Daten</option>
                <option value="dat-1">1x</option>
                <option value="dat-2">2x</option>
                <option value="dat-3">3x(fals möglich)</option>
            </select>
            <select class="select anzahl" name="daten-anzahl">
                <option selected>Anzahl</option>
                <option value="daten-1">1x</option>
                <option value="daten-2">2x</option>
                <option value="daten-3">3x(fals möglich)</option>
            </select>
            <select class="shop-box-more se lect" name="gpu">
                <option selected>Grafikkarte</option>
                <option value="gpu-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="gpu-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="gpu-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="select anzahl" name="gpu-anzahl">
                <option selected>Anzahl</option>
                <option value="gra-1">1x</option>
                <option value="gra-2">2x (fals möglich)</option>
                <option value="gra-3">3x (fals möglich)</option>
            </select>
            <select class="shop-box select" name="netzteil">
                <option selected>Netzteil</option>
                <option value="netz-1">LOW BUDGET (UNTER 1000.-CHF)</option>
                <option value="netz-2">AVERAGE BUDGET (1000-4000.-CHF)</option>
                <option value="netz-3">HIGH BUDGET (ÜBER 4000.-CHF)</option>
            </select>
            <select class="shop-box-more select" name="cooler">
                <option selected>Kühlung</option>
                <option value="air">Luftkühlung</option>
                <option value="aoi">All in one Wakü</option>
                <option value="cw">Costum Wakü (in "weiters" erläutern)</option>
            </select>
            <select class="select anzahl" name="cooler">
                <option selected>Anzahl lüfter</option>
                <option value="2x">2x</option>
                <option value="3x">3x</option>
                <option value="2+k">2x + Radiator (kleinster)</option>
                <option value="2+g">2x + Radiator (grösster)</option>
                <option value="3+k">3x + Radiator (kleinster)</option>
                <option value="3+g">3x + Radiator (grösster)</option>
            </select>
            <textarea class="text-box message" type="text" name="text" placeholder="WEITERE WÜNSCHE..."></textarea>
            <div class="preis">
                <h1>Dein Setup</h1><hr>
                    <div>
                        <a id="case">-</a><br>
                        <a id="mainboard">-</a><br>
                        <a id="cpu">-</a><br>
                        <a id="ram">-</a><a id="an r">-</a><br>
                        <a id="sys">-</a><br>
                        <a id="dat">-</a><a id="an daten">-</a><br>
                        <a id="gpu">-</a><a id="an gra">-</a><br>
                        <a id="netz">-</a><br>
                        <a id="kueh">-</a><a id="an cooler">-</a>
                    </div><hr>
                <h3>Aktueller Preis:</h3>
                <a class="preiss-gesamt">150.-</a>
            </div>
            <input class="text-box submit" name="submit" type="submit" value="SENDEN">
    </form>
</div>
<script>
        document.querySelectorAll(".shop-box").forEach(function(ele, idx) {
            ele.addEventListener("change", function () {
                var val = this.options[this.selectedIndex].value;
                document.getElementById(ele.getAttribute("name")).innerHTML = val;
            });
        });
    </script>

wo liegt das problem das der rest nicht geladen wird?
 

Sempervivum

Erfahrenes Mitglied
Das Skript setzt voraus dass der Name des select mit der ID des a-Tag übereinstimmt. Bei system/sys und dat/daten ist das nicht der Fall. Sollte sich problemlos ändern lassen.
 
Hay noch ne kurze Ergänzungs frage ich habe ein weiteres script in meinem code und das "blockiert". kann ich daher dise 2 script so zusammen fügen das es wider funktionirt?
Code:
<script>
        $(".shop-box.select").on("change", function () {
            var gesamtpreis = 0;
            $(".shop-box.select option:selected").each(function (idx, ele) {
                var einzelpreis = parseFloat($(this).data("preis"));
                if (!isNaN(einzelpreis)) gesamtpreis += einzelpreis;
            });
            $(".preis-gesamt").text(gesamtpreis.toFixed(2));
        });
</script>
<script>
$(document).ready(function() {
  $('select').niceSelect();
});
</script>
 

Sempervivum

Erfahrenes Mitglied
Ich empfehle, auf dieses Skript zu verzichten und das aus deinem anderen Thread für alle Berechnungen zu benutzen.
Edit: Sehe gerade, dass Du in deinem ursprünglichen Code diese a-Tags hast, wo die Summe der einzelnen Positionen angezeigt wird. Ich empfehle, das in dem Skript aus deinem anderen Thread hinzu zu fügen und auf dieses Skript zu verzichten.