nicht angemeldet
Rolf B
Der Martin
Rolf B
Der Martin
Rolf B
Tabellenkalk
Rolf B
Felix Riesterer
Hallo zusammen,
ich habe mir mit Hilfe von Google etwas zusammen gebastelt um durch die Auswahl eines Dropdown ein Textfeld ausfüllen zu lassen. Nun muss ich nach Auswahl des Dropdown jedoch nicht ein Textfeld füllen lassen, sondern 3-5.
Ich habe versucht den Code zu erweitern, umzuschreiben und über google nach Hinweise zu suchen, leider erfolglos.
Bislang sieht es so aus:
<td><select class="pulldown" name="option" id="option">
<option value="1">Option wählen</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select></td>
<input type="hidden" name="optionID_Option 1" value="Wert 1.1"/>
<input type="hidden" name="optionID_Option 2" value="Wert 2.1"/>
<input type="hidden" name="optionID_Option 3" value="Wert 3.1"/>
<tr><td><input type="text" name="wert" id="wert" readonly></td>
<script type="text/javascript">
var dropDown = document.getElementById('option');
var textfeld = document.getElementById('wert');
dropDown.onchange = function() {
var hidden = document.getElementsByName('optionID_' + this.value)[0];
if(hidden)
textfeld.value = hidden.value;
};
</script>Quelltext hier
Wenn ich es versuche auf meine Bedürfnisse zu ändern, wird mir nur das letzte Textfeld mit dem ersten Wert gefüllt.
Ich hätte aber gerne, dass bei Auswahl von Option 1, Textfeld 1: Wert 1.1, Textfeld 2: Wert 1.2, Textfeld 3: Wert 1.3 hat.
Über einen Denkanstoß würde ich mich freuen. Gerne auch einen ganzen anderen Weg, falls ich mich verrannt habe.
Viel Grüße
Hallo mikefry,
die Grundsatzfrage stell ich trotzdem: Wiesu tut er su?[1]
Ein Dropdown kann nur einen Wert liefern, eine Verteilung auf mehrere Input-Felder erscheint wenig sinnvoll.
Eine Begründung, warum Du so etwas tun möchtest, würde mich deshalb interessieren. Vielleicht ist ja auch dein Beispiel-HTML noch im Experimentierstadium und führt darum in die Irre.
Aber ich verstehe deine Absicht noch nicht. Du hast im Moment drei verborgene Textfelder. Wähle ich im Select einen Wert aus, wird der value des zur gewählten Option passenden hidden-Feldes in das offene Textfeld kopiert. Das funktioniert. Nicht schön, nicht mit modernem Javascript-Stil, aber es funktioniert. Und es passt nicht zu deinen Absichtsbeschreibungen. Könntest Du bitte ein HTML vorstellen, dass zu deinen Absichten passt? Ohne JS, darüber verhandeln wir dann.
Dass man heute kein Table-Layout mehr macht, weißt Du auch schon? Auf den Umstand, dass das, was du zeigst, ungültiges HTML ist (td ohne tr, input-Elemente als Geschwister-Elemente von td) gehe ich nicht ein; ich nehme einfach mal an, du hast was aus deinem Quelltext zusammenkopiert und nicht alle Strukturelemente mitgenommen.
Rolf
Was bin ich? 😉 ↩︎
Hallo Rolf,
Wiesu tut er su?
Dunkeltroll? Graugnom? 😉
Live long and pros healthy,
Martin
Hallo Martin,
Zweimal 5 Mark ins Schweinderl.
Der nächste Versuch?
Rolf
Hallo,
Zweimal 5 Mark ins Schweinderl.
da fehlte ja auch die charakteristische Handbewegung.
Der nächste Versuch?
Ich hab keinen weiteren. Das war das einzige, was mir dazu einfiel.
Aber immerhin spontan und zielsicher.
Live long and pros healthy,
Martin
Hallo Martin,
die Dunkeltrolle waren nur haarscharf daneben...
Die richtigen Lebewesen sind ebenfalls eichhörnchengroß, haben auch eine dicke Nase, leuchten aber nicht...
Rolf
Hallo,
die Dunkeltrolle waren nur haarscharf daneben...
Rumpelwichte!?
Gruß
Kalk
👍⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Liebe(r) mikefry,
ich habe mir mit Hilfe von Google etwas zusammen gebastelt
was bedeutet das für Dein Verständnis von dem, was Du da tust? Hier bekommst Du in aller Regel keine fertigen Lösungen (was Du auch nicht erwartest). Wenn Du nun Denkanstöße haben möchtest, wäre gut zu wissen, was genau Du an Deiner Lösung schon verstehst, damit man von dort aus weiter beraten kann.
var dropDown = document.getElementById('option'); var textfeld = document.getElementById('wert'); dropDown.onchange = function() { var hidden = document.getElementsByName('optionID_' + this.value)[0]; if(hidden) textfeld.value = hidden.value; };
Du definierst zwei Variablen, die jeweils eine Referenz auf ein HTML-Element enthalten, welches Du über eine ID bestimmst:
dropDown referenziert ein <select>textfeld referenziert ein <input type="text">um durch die Auswahl eines Dropdown ein Textfeld ausfüllen zu lassen.
Dafür verleihst Du dropDown einen EventHandler, der beim Ereignis change eine Funktion ausführt. Das tust Du, indem Du dem HTML-Elementobjekt in der Variable dropDown die Eigenschaft onchange mit einem Wert befüllst, nämlich genau der Funktion, die das Befüllen leisten soll. Wie man Ereignisverarbeitung besser lösen kann, findest Du im passenden Tutorial: JavaScript/Tutorials/DOM/Ereignisverarbeitung
Nun muss ich nach Auswahl des Dropdown jedoch nicht ein Textfeld füllen lassen, sondern 3-5.
Schauen wir doch einmal genauer hin, was Deine Funktion so tut:
var hidden = document.getElementsByName('optionID_' + this.value)[0]; if(hidden) textfeld.value = hidden.value;
Die Funktion holt sich zunächst alle passenden HTML-Element anhand ihres name-Attributwertes. Von den gefundenen nimmt sie sich das erste (dafür sorgt [0]), egal ob es überhaupt ein solches gibt. Hier fehlt eine Möglichkeit ein Scheitern abzufangen.
Dieser Wert in name wird aus zwei Teilstrings zusammengesetzt, nämlich optionID_ und entweder Option 1 oder Option 2 oder Option 3. Wie wird nun der zweite Teilstring ermittelt? Du verwendest den Ausdruck this.value. Was genau bedeutet das? Welchen Wert liefert dieser Ausdruck im Einzelfall zurück? Wie kann man das testen?
Das Testen sollte kein Problem sein, denn wenn Du diese Zeile in Deine Funktion aufnimmst, dann kannst Du in der Browserkonsole (Taste [F12]) nachschauen, was dort ausgegeben wird:
console.log("this.value: ", this.value);
Meines Wissens ist es problematisch, wenn Du in name-Attributwerten Leerzeichen verwendest. Dort sollten ausschließlich alphanumerische Zeichen (a-z, A-Z, 0-9, _, -) verwendet werden.
Ich habe versucht den Code zu erweitern, umzuschreiben und über google nach Hinweise zu suchen, leider erfolglos.
In Deinem Code sehe ich keinerlei Ansätze für eine solche Erweiterung.
Liebe Grüße
Felix Riesterer