Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 2 - Die select-Felder manipulieren

1. Die Abschnitte

2. Die Methode manipulateSelects

... wird wie gehabt ganz normal innerhalb des Objektes ajaxTut eingebaut. Um euern Verstand ein wenig zu trainieren, habe ich den Parametern, die wir in der Methode analysePostXml übergeben, einfach mal andere Namen gegeben. Das schult den Geist und härtet ab. Und da wir wissen, dass wir hier ein Array verarbeiten müssen, bauen wir die Schleife sofort mit ein. 


function ajaxTut(fields)
{
  ...
  function manipulateSelects(result, element)
  {
    for (var i = 0; i < result.length; i++)
    {
      ...
    }
  }
}

Jetzt werdet ihr sicher auch verstehen, warum wir in der Methode analysePostXml die Zählervariable auf privat gesetzt haben und es hier genau so machen. Denn so kann man in einer Schleife eine weitere erzeugen, ohne dass sich die gleich lautenden Zählervariablen in die Quere kommen.

3. Die option-Elemente

Erzeugen und Text einhängen


for (var i = 0; i < result.length; i++)
{
  var opt     = document.createElement('option');
  var eingabe = document.createTextNode (window[element][result[i]]);
  opt.appendChild (eingabe);
}

Erläuterung

Wer sich bereits durch das Praxistutorial 1 gearbeitet hat, wird das hier schon kennen. Mit var opt = document.createElement('option'); erzeugt man ein option-Element und mit var eingabe = document.createTextNode (window[element][result[i]]); einen Textknoten. Nur wie holen wir uns den?

Die einzelnen Arrays in der formular.htm sind global verfügbar! Und daher können wir jederzeit über das window-Objekt darauf zugreifen, auch dynamisch (Dank an Hopka für den Hinweis). element ist dabei der Name des Arrays. Und der lautet (mal wieder) genau so, wie der des entsprechenden select-Feldes. result[i] als Ergebnis des Ajax-Requests enthält die Zahl, die auf den entsprechenden numerischen Index des aktuellen Arrays in der formular.htm verweist. Hier könnt ihr also noch mal sehen, wie eine einheitliche Vergabe von Namen uns viel Blut, Schweiß und Arbeit erspart. Das nennt sich flexible Programmierung. Zu guter Letzt hängen wir dann besagen Textknoten in das zuvor erzeugte option-Element mit opt.appendChild (eingabe); ein.

Attribute setzen

Davon benötigen wir deren zwei. Zum einen den value-Wert und zum anderen ein mögliches selected, wenn denn vorher etwas anderes als der Standardwert ausgewählt wurde. 


for (var i = 0; i < result.length; i++)
{
  ...
  opt.setAttribute('value', result[i]);
  if (select[element] == result[i])
  {
    opt.setAttribute('selected', 'selected');
  }
  form[element].appendChild(opt);
}

Erläuterung

Mit opt.setAttribute('value', result[i]); weisen wir dem jeweiligen option-Element den numerischen Wert aus den Ajax-Request als value zu. Aber woher wissen wir, wann wir dem das zusätzliche Attribut selected verpassen sollen? Erinnert ihr euch noch an die öffentliche Methode prepareRequest? Da haben wir uns doch den Wert des ausgewählten option-Elements gemerkt und in das "assoziative" Array select geschrieben. 


this.prepareRequest = function(art, id)
{
  ...
  if ('post' == art)
  {
    for (i in input)
    {
      ...
      if (form[input[i]].selectedIndex > 0)
      {
        index            = form[input[i]].selectedIndex;
        select[input[i]] = form[input[i]].options[index].value;
      }
    }
  }
} 

Also überprüfen wir, ob die beiden Werte select[element] und result[i] übereinstimmen. Wenn ja, so verpassen wir dem erzeugten option-Element das entsprechende Attribut.

Ein Hinweis

opt.setAttribute('selected', 'selected'); ist die XHTML-konforme Version. Möglich wäre auch opt.setAttribute('selected', true). In wieweit das funktioniert, kann ich allerdings nicht beurteilen, da ich seit Jahren nur noch mit der XHTML-Variante arbeite.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt