Johannes Gamperl

Im Rahmen eines Projekts hatte ich im Backoffice die Anforderung, Abhängigkeiten mit Hilfe unterschiedlicher select-Elemente darzustellen. Ziel war es, dass der jeweils ausgewählte Inhalt eines Elements das nächste Element mit den dazu passenden Inhalten füllt. Das neu gefüllte Element ergänzt wiederum das nächste Element mit den passenden Inhalte usw. Das Folgeelement steht somit jeweils in Abhängigkeit zu dem vorangegangenen Element.

Für diese Aufgabe sollten eigentlich zahlreiche Snippets im Web zu finden sein. Eine Suche führte mich zu zahlreiche Scripten, welche zwei select-Elemente mit einander verbanden. Weitaus weniger fand ich für drei miteinander verbundenen select-Elementen und dann hörte es schon auf. Was fast alle dieser Skripten gemeinsam haben, ist die umständliche Art und Weise, wie die Datensätze für die select-Elemente vorgehalten werden – meist mittels unübersichtlicher Array-Strukturen.

jog.Form.NestedSelect()

Kurzum, nachdem ich keine für mich brauchbaren Beispiele fand, habe ich selbst ein Objekt für diese Aufgabe geschrieben. Es hört auf den Namen NestedSelect und ist im Namespace jog.Form gefangen. Mit diesem Objekt ist es möglich, beliebig tief verschachtelte select-Elemente darzustellen. Als Datenquelle wird eine einfache Baumstruktur verwendet. Die Beziehung der Einträge zueinander wird dabei über die Eigenschaften id und pid gesteuert. Der Einsatz des “Nested-Set”-Models erschien mir für diesen Zweck nicht nötig.

Konstruktor

Ein neues Objekt wird wie folgt instanziiert:

new jog.Form.NestedSelect({options})

Die möglichen Eigenschaften werden über ein Objek-Literal vereinbart. Diese Klasse besitzt die folgenden Eigenschaften:

{
	'prefix' : 'string',
	'db'     : [array],
	'sText'  : 'string',
	'sEmpty' : 'string'
}

prefix

Mit dieser Eigenschaft übergeben Sie das Prefix der Element-IDs ihrer gruppierten select-Elemente. Diese Elemente müssen nach einem vorgegebenen Muster aufgebaut sein. Dies ist die Prefix und eine nummerierte Reihenfolge 1...n. Die name-Attribute dieser Elemente müssen ebenfalls mit der gleichen Prefix als Array benannt werden. Beachten Sie dabei auch die Groß-/Kleinschreibung.

<select id="bsp1" name="bsp[]"></select>
<select id="bsp2" name="bsp[]"></select>
...

Die Auszeichnung mittels einem id-Attribut hat den Vorteil, dass die Elemente an beliebiger Stelle und in willkürlicher Reihenfolge gesetzt werden können. Sie stehen trotzdem miteinander in logischer Verbindung.

db

Die Beziehungen der jeweiligen select-Elemente werden über die Ebenen der Baumstruktur hergestellt. Das folgende Beispiel stellt eine Baumstruktur mit einer Tiefe von drei Ebenen dar. Dies bedeutet, dass es ein “select-Set” mit drei Elementen geben wird.

	Nr. 1
		Nr. 1.1
			Nr. 1.1.1
			Nr. 1.1.2
			Nr. 1.1.3
		Nr. 1.2
		Nr. 1.3
	Nr. 2
		Nr. 2.1
	Nr. 3

Die Eigenschaft db bildet diesen Baum über ein einfaches Modell ab, wobei die Beziehung der Elemente über die Eigenschaft pid hergestellt wird. In pid wird die id des Eltern-Elements angegeben. Auf diese Weise entsteht eine einfach verkettete Liste.

	'db' : [
		{ 'id' : 1, 'pid' : 0, 'title' : 'Nr. 1'     },
		{ 'id' : 2, 'pid' : 1, 'title' : 'Nr. 1.1'   },
		{ 'id' : 3, 'pid' : 2, 'title' : 'Nr. 1.1.1' },
		{ 'id' : 4, 'pid' : 2, 'title' : 'Nr. 1.1.2' },
		{ 'id' : 5, 'pid' : 1, 'title' : 'Nr. 1.2'   },
		{ 'id' : 6, 'pid' : 1, 'title' : 'Nr. 1.3'   },
		{ 'id' : 7, 'pid' : 0, 'title' : 'Nr. 2'     },
		{ 'id' : 8, 'pid' : 0, 'title' : 'Nr. 3'     },
		{ 'id' : 9, 'pid' : 7, 'title' : 'Nr. 2.1'   }
	]

sText und sEmpty

Mit Hilfe dieser Eigenschaften können Sie den Standardtext für die jeweils erste Option der select-Elemente bestimmen. Per Default ist für sText der String “–SELECT–” und für sEmpty die Zeichenkette “–EMPTY–” eingerichtet.

Beispiel

Die folgenden Beispiele zeigen die unabhängige Verwendung dieser Klasse mit zwei unterschiedlichen “select-Sets”. Wie Sie erkennen können, ist es damit möglich, beliebig viele unabhängige verkettete select-Elemente zu erzeugen.

Der Quellcode aus diesem Beispiel stellt sich wie folgt dar:

<form>
<p>
	<select id="a1" name="a[]" style="width:100px;"></select>
	<select id="a2" name="a[]" style="width:100px;"></select>
	<select id="a3" name="a[]" style="width:100px;"></select>
</p>
<p>
	<select id="b1" name="b[]" style="width:100px;"></select>
	<select id="b2" name="b[]" style="width:100px;"></select>
</p>
</form>
<script src="jog.Form.NestedSelect.js" type="text/javascript"></script>
<script type="text/javascript">
var a = new jog.Form.NestedSelect({
	'prefix' : 'a',
	'db' : [
		{ 'id' : 1, 'pid' : 0, 'title' : 'Nr. 1' },
		{ 'id' : 2, 'pid' : 1, 'title' : 'Nr. 1.1' },
		{ 'id' : 3, 'pid' : 2, 'title' : 'Nr. 1.1.1' },
		{ 'id' : 4, 'pid' : 2, 'title' : 'Nr. 1.1.2' },
		{ 'id' : 5, 'pid' : 1, 'title' : 'Nr. 1.2' },
		{ 'id' : 6, 'pid' : 1, 'title' : 'Nr. 1.3' },
		{ 'id' : 7, 'pid' : 0, 'title' : 'Nr. 2' },
		{ 'id' : 8, 'pid' : 0, 'title' : 'Nr. 3' },
		{ 'id' : 9, 'pid' : 7, 'title' : 'Nr. 2.1' }
	]
});
var b = new jog.Form.NestedSelect({
	'prefix' : 'b',
	'db' : [
		{ 'id' : 1, 'pid' : 0, 'title' : 'Auto' },
		{ 'id' : 2, 'pid' : 1, 'title' : 'Audi' },
		{ 'id' : 3, 'pid' : 1, 'title' : 'BMW' },
		{ 'id' : 4, 'pid' : 1, 'title' : 'Opel' },
		{ 'id' : 5, 'pid' : 0, 'title' : 'Farbe' },
		{ 'id' : 6, 'pid' : 5, 'title' : 'Grün' },
		{ 'id' : 7, 'pid' : 5, 'title' : 'Rot' }
	]
});
</script>

Lizenz und Download

Die JavaScript-Klasse jog.Form.NestedSelect.js ist unter einer “Creative Commons-Lizenz” lizenziert. Falls Sie diese Klasse in kommerziellen Projekten nutzen möchten, setzen Sie sich bitte mit mir per Email in Verbindung.

Download Version 1.0: jog.Form.NestedSelect.js (2kb)

Falls Sie diese Klasse für Ihre Projekte einsetzen, würde ich mich über einen Hinweis freuen.

Historie

Version 1.0 – 21.09.2009

Dieser Beitrag wurde vor am Montag, 19. Oktober 2009 um 20:05 Uhr veröffentlicht und unter Allgemein gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.