Dropdown-Problem: mit einem Dropdown mehrere Textfelder füllen

[Felix Riesterer]

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