onclick vs. onchange

[Orlok]

Hallo

Die Anzahl der benötigten Optionsfelder muss aber variabel sein und sich nicht einfach nur erhöhen […]

Dazu wurden dir ja an anderer Stelle hier im Thread bereits Lösungen präsentiert.

Wobei ich mich allerdings frage, was du eigentlich vorhast:

Soll in deinem zweiten select wirklich nur eine aufsteigend sortierte Liste aus Ganzzahlen mit variabler Länge angeboten werden, sprich, ist die Anzahl der zu erzeugenden options tatsächlich die einzige Information, die du benötigst?

Wie dem auch sei hast du hier zwei Möglichkeiten, nämlich entweder du hinterlegst die entsprechenden Werte in data-Attributen im HTML, und liest die Werte dann innerhalb der Handlerfunktion aus, nachdem du das option-Element identifiziert hast, welches der Benutzer ausgewählt hat...

...oder du hinterlegst die Werte für die Anzahl der zu erzeugenden options in einem Array, idealerweise so, dass document.forms.Test.elements.Auswahl.selectedIndex mit dem Indexschlüssel für den entsprechenden Eintrag im Array identisch ist:

document.body.addEventListener('change', function (e) {
  var Auswahl = document.forms.Test.elements.Auswahl;
  if (e.target === Auswahl) {
    var Anzahl = [13, 25, 8, 17, 21];
    var Felder = document.forms.Test.elements.Felder;
    var i, option, index = Auswahl.selectedIndex;
    Felder.options.length = 0;
    for (i = 0; i < Anzahl[index]; i += 1) {
      option = document.createElement('option');
      Felder.appendChild(option);
      option.text = i;
    }
  }
});

Die Frage, die sich stellt ist also zunächst einmal: Welche Werte brauchst du für die Erstellung der options für das zweite select? Und wenn du diese Frage beantwortet hast, ist die nächste Frage: Wo willst du diese Werte hinterlegen? Im HTML-Dokument oder im Script?

Ersteres hätte den Vorteil, dass nachträgliche Änderungen leichter von der Hand gehen, da sie nur an einer Stelle vorgenommen werden müssen. Wenn wirklich nur die Anzahl der zu erzeugenden options gefragt ist, dürfte dies das Mittel der Wahl sein.

Letzters allerdings dürfte umso attraktiver werden, je mehr Werte hinterlegt werden sollen, denn nehmen wir mal an, du wolltest nicht bloß eine Liste von 1 bis 17 erzeugen, sondern richtig beschriftete options generieren, dann würdest du, wenn du die ganzen Werte in einem oder gar mehreren data-Attributen hinterlegen wolltest, deinen HTML-Code ziemlich schnell vollkommen unleserlich machen.

Das ist übrigens ein Effekt, den du auch dadurch erzielen kannst, indem du auf die Methode addEventListener( ) verzichtest und statt dessen JavaScript mit HTML vermischst, aber das nur nebenbei.

Jedenfalls kannst du dir eine Menge Schreibarbeit sparen und deinen Code deutlich übersichtlicher gestalten, indem du die Events an einer zentralen Stelle abfängst und dann innerhalb der Handlerfunktion selektierst, statt dies bereits bei der Registrierung der Handler zu tun. Stichwort: Event Delegation.

Das ist in der Tat auch noch so ein Problem... ich dachte daran die Funktion per onload() mit dem vorselektierten Wert aufzurufen.

Wenn du die Einträge für das erste Element von Auswahl direkt nach dem Laden der Seite erzeugen willst, wäre wohl 'DOMContentLoaded' das richtige Event für dich:

document.addEventListener('DOMContentLoaded', function ( ) {
    //...
});

Gruß,

Orlok