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