Dropdown Wert einfügen

Stef · 26. August 2019

Thema von coconut. Alle Beiträge dazu wurden zusammengeführt und durch ein Strich getrennt.

coconut : Bitte zukünftig ein neues Thema erstellen. Danke!

Hallo zusammen,

da ich noch nicht allzu viel Erfahrung mit HTML und co habe bitte ich euch um Hilfe bei folgendem Problem. Ich möchte eine Dropdown-liste mit <select> so programmieren, dass beim auswählen eines bestimmten Option value ein von mit vorgegebener Text in ein zuvor bereitgestelltes Textfeld eingefügt wird. Vielleicht hilft hier ein kleines sinnloses Beispiel um zu verstehen, was ich meine..

<form>

Vorhandene Zutaten:

<option value="val2">Milch</option>

<option value="val3">Honig</option>

<option value="val4">Butter</option>

</select>

Wie viel Zeit hast du:

</select>

</form>

<form>

Ergebnis: <br>

</textarea>

</form>

Wenn jetzt der Benutzer "val0", also keine Zutaten auswählt möchte ich, dass in meinem Textfeld der Text "Unter diesen Umständen kannst du keinen Kuchen backen." eingefügt wird. Zudem würde ich gerne, wenn der Benutzer in der zweiten Dropdown-Liste z.B. Val3 auswählt einen weiteren Text in das Textfeld einfügen ohne dass der Text "Unter diesen Umständen kannst du keinen Kuchen backen." verschwindet. Dass ich im Textfeld also Zwei Sätze hintereinander stehen habe, die sich je nach Auswahl der Option values anpasst.

Gibt es dafür eine einfache Möglichkeit? Freue mich über jede Hilfe und hoffe ihr könnt mir als absoluten Anfänger den ein oder anderen Tipp geben.

Einen schönen Sonntag!

coconut

Warum um alles in der Welt wärmst du einen Thread aus dem Jahre 2016 auf, anstatt einen neun Thread zu eröffnen?

Beschäftige dich mal mit dem JavaScript Event 'onchange'

https://www.mediaevent.de/javascript/onchange.html

Ich habe hier in dem Forum viel gelesen und habe nicht auf das Datum geachtet sondern mehr auf das Thema.. war also keine Absicht, eher Unwissenheit, da wie gesagt absoluter Anfänger...

Zitat von Sailor

Beschäftige dich mal mit dem JavaScript Event 'onchange'

https://www.mediaevent.de/javascript/onchange.html

Das habe ich auch schon ausprobiert, allerdings fehlt mir hier der Zusammenhang zwischen zwei verschiedenen dropdown-listen sowie der Verweis auf ein gemeinsames Textfeld...

Deine 2 verschiedenen Dropdownlisten müssen auch 2 verschiedene ID (und names's) haben.

Außerdem ist eine Textarea nicht das Element, welches du für deine Zwecke brauchst... denke ich zumindest, oder willst du mit dessen 'Inhalt' an anderer Stelle weiterarbeiten?

Nutze hier ein einfaches <div>... und gib dem auch eine eindeutige ID, dann kannst du das DIV auch aus JavaScript (mit 'innerHTML' ) manipulieren.

mhhh... Irgendwie komme ich noch nicht so wirklich weiter mit den Tipps.

wie würde man das denn programmieren? Kann mir jemand ein Beispiel dazu zeigen? Oder ist das viel zu viel Aufwand? Logisch 2 verschiedene ID´s das macht Sinn

OK... aber nur weil heute Sonntag ist und die Sonne scheint - eigentlich sollten die bisherigen 'Hinweise' dich mit etwas Eigeninitiative schon auf die richtige Schiene setzen.

Aber hier was zum spielen...

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Ausgabe Select in DIV</title>
</head>
<body>
<form name="mein_formular">
<select id="selone">
   <option value="noch_nix">..</option>
   <option value="nix">Butter</option>
   <option value="auch_nix">Mehl</option>
   <option value="nochmal_nix">Zucker</option>
</select>
<select id="seltwo">
   <option value="noch_leer">..</option>
   <option value="schon_wieder_nix">wenig</option>
   <option value="und">geht so</option>
   <option value="so_weiter">ewig</option>
</select>
</form>
<div class="show" id="anzeige"></div>

<script>
let show = document.getElementById('anzeige'); // Das DIV für die Ausgabe auswählen
let sel1 = document.getElementById('selone');  // Das SELECT (1) für die Eingabe auswählen
let sel2 = document.getElementById('seltwo');  // Das SELECT (2) für die Eingabe auswählen
sel1.addEventListener ("change", function () {  // Das onchange Event für Eingabe 1
   let vorhanden = show.innerHTML;              // lese bisherigen Inhalt der ausgabe
   show.innerHTML = vorhanden + " so wird das nichts!" + "<br>"; // schreibe neuen Inhalt
});

sel2.addEventListener ("change", function () {  // Das onchange Event für Eingabe 2
   let vorhanden2 = show.innerHTML;             // lese bisherigen Inhalt der ausgabe
   show.innerHTML = vorhanden2 + " bisschen wenig Zeit - oder?" + "<br>"; // schreibe neuen Inhalt
});
</script>

</body>
</html>

Alles anzeigen

Tausend tausend Dank!!!! Mein Held des Tages

Auf die Gefahr hin, dass ich nerve.. wie kann ich jetzt noch für die verschiedenen option values verschiedene Texte einfügen lassen? Ich komme - trotz Eigeninitiative - auf keinen grünen Zweig...

Dann schau dir bitte mal in dem Link an, den ich im Post #10 angehängt habe, wie dort der Wert des 'values' ausgelesen wird - wenn du den hast, dann kannst du im JavaScript mit 'case'...

https://www.mediaevent.de/javascript/switch.html

entsprechend verschiedene Ausgaben erzeugen.

Dankeschön! Was mache ich falsch?

<!DOCTYPE html>

<head>

<title>Ausgabe Select in DIV</title>

</head>

<body>

<option value="2">Butter</option>

<option value="4">Zucker</option>

</select>

<option value="6">wenig</option>

</select>

</form>

let show = document.getElementById('anzeige'); // Das DIV für die Ausgabe auswählen

let sel1 = document.getElementById('selone'); // Das SELECT (1) für die Eingabe auswählen

let sel2 = document.getElementById('seltwo'); // Das SELECT (2) für die Eingabe auswählen

sel.onchange = function () {

switch (this.value) {

case '1':

let vorhanden = show.innerHTML;

show.innerHTML = vorhanden + 'so wird das nichts.' + '<br>';

break;

case '2':

let vorhanden = show.innerHTML;

show.innerHTML = vorhanden + 'Immerhin ist Butter da.' + '<br>';

break;

case '3':

let vorhanden = show.innerHTML;

show.innerHTML = vorhanden + 'Immerhin ist Mehl da.' + '<br>';

break;

...

}

</script>

</body>

</html>

Guck einfach mal in der Console des Browsers nach.

Was denkst du, von welchem Element du mit sel.onchange das Change Event abfängst?

Dropdown Wert einfügen

Jetzt mitmachen!

Teilen