Die sogenannten “<select>” HTML-Elemente (oder auch bekannt als Drop-Down Menüs) werden häufig in Webseiten eingesetzt, insbesondere in Formularen, wo eine Auswahl anhand von mehreren Möglichkeiten getrofffen wird.

Eine häufig-benutzte Eigenschaft bei der Programmierung mit Select-Elementen ist die Mehrfachauswahlmöglichkeit. Somit wird das Feld in ein Textbox mit Scrollbalken, wo mehrere Elemente per Maus selektiert werden können. Wenn die Elemente, die Sie selektieren möchten unter einander vorkommen, dann können Sie das oberste Element mit der Maus markieren und einfach mit gedrückter Maustaste nach unten ziehen. Wenn Sie mehrere Elemente/Options selektieren möchten, die nicht einander folgen, so können Sie die STRG Taste gedrückt halten und per Mausklick die Elemente markieren und somit selektieren.

Problematik

Die Problematik, die wir an dieser Stelle sehen und angreifen möchten, ist dass die Liste der Options einfach zu lang werden kann, was das Selektieren im wesentlichen umständlich macht. Ein Beispielsscenario wäre eine sehr lange Liste mit Tags, die Sie einer Seite oder Element zuordnen möchten. Der Schieberegler wird immer kleiner und das Markieren wird langsam unmöglich. Welche Möglichkeit gibts es auch vom Webdesign her da?

Einsatz

Man kann die Optionen im Selectfeld automatisch per Javascript markieren lassen, in dem man diese beispielsweise neben dem Feld als reine Links ausgibt und der Eigenschaft der Links “onclick” diese Funktion zuweist:

function SelectItemInSelect(arrSelect, sItem) {
   for (k=0; k<arrSelect.options.length; k++) {
      if (arrSelect.options[k].value==sItem) {
           arrSelect.options[k].selected = true;
      }
   }
}

Welche Parameter nimmt die Programmierfunktion?

1. arrSelect – das ist das eindeutig im ‘document’ identifizierte <select>, dessen Optionen durchsucht werden, Object
2. sItem – das ist der Wert des Options, nach dem es gesucht wird und dass wir selektieren möchten, String

Was macht die Funktion?

1. Die Funktion loopt durch die for-Schleife alle Elemente des übergebenen Selects.
2. Die Optionen vom Select würden so aussehen:

<option value="IrgendeinID">Text</option>

Sollte IrgendeinID gleich sItem sein, so wird das Element markiert. Das richtig coole dabei ist dass das Feld automatisch zum markierten Element springt, so dass es immer sichtbar ist. So nimmt man die Selektion wahr.

Wie setzt man die Funktion bei der Programmierung ein?

Alle Elemente/Options des Selectfeldes können neben dem Feld als Links ausgegeben, in dieser Form:

<a href="javascript:void(0);" onclick="SelectItemInSelect(document.forms.IhrSelect, 234)" id="Tag234">TextvonTag234</a>

Beim anklicken des Links wird die Funktion ausgeführt und das Optionelement wird selektiert.

Erweiterte Version

Sollten Sie eine sehr große Liste von Tags haben, wo Sie auch bei den Links nicht mehr durchschauen, so würden Sie die angeklickten Links schon mal auf eine Layouttechnische Art und Weise bezeichnen, dass sie angeklickt/markiert wurden. Aus diesem Grund haben wir bei der Gestaltung vom Link die id=”Tag234″ hinzugefügt, so dass wir in der Javascript Funktion diesen Link wieder erkennen und manipulieren wollen. Anbei die erweiterte JS Funktion, die die angeklickten Links im Rot einfärbt:

function SelectItemInSelect(arrSelect, sItem) {
   for (k=0; k<arrSelect.options.length; k++) {
      if (arrSelect.options[k].value==sItem) {
           document.getElementById('Tag'+sItem).style.color='#FF0000';
           arrSelect.options[k].selected = true;
      }
   }
}

Sie können gerne eine andere Farbe sich aussuchen, in dem Sie den RGB Wert “#FF0000″ ändern.

Fazit

Diese Funktion hilft uns ganz schnell eine Mehrfachauswahl bei großen <select> Listen zu treffen. Wie man allerdings die selektierten Elemente mit PHP behandeln kann und in ein Array speichern kann, lesen Sie bei unserem nächsten Artikel über die Übergabe von multiple Selects an PHP.