Abhängige Combo-Boxen für Formulare

Nehmen wir an, wir haben ein Formular mit zwei Combo-Boxen. Wählt man einen Eintrag in der Ersten aus, soll sich der Inhalt der Zweiten dynamisch anpassen.

Hier ein Beispiel


Wie funktioniert das Ganze? Ich beschreibe das hier am Beispielformular. Ich beziehe ich mich auch auf unsere Software DA-FormMaker, aber das Ganze funktioniert in jedem Formular.

Anlegen der Comboboxen

Die Comboboxen werden ganz normal in HTML oder im DA-FormMaker angelegt.

Die Erste: diese wird bei Änderung den Inhalt der Zweiten verändern:

<select name="Stadt" id="selectStadt" size="1" onchange="changeSelect()">
	<option>Lübben</option>
	<option>Buchloe</option>
	<option>Kaufbeuren</option>
</select>

Wir haben hier einen Event-Handler hinzugefügt: onchange=”changeSelect()”. D.h. wenn die Auswahl sich ändert, wird die Funktion “changeSelect” aufgerufen. Diese werden wir später hinzufügen.

Nun legen wir die zweite Combo-Box an:

<select name="Hotel" id="selectHotel" size="1">
	<option>Test</option>
</select> 

Im Prinzip brauchen wir keine “ hier, da wir diese mittels Script setzen werden. Ich habe hier trotzdem eine Option mit dem Namen “Test” eingefügt. Wenn diese erscheint im fertigen Formular, haben wir einen Fehler gemacht. 🙂

Zu beachten ist hier noch der Wert des Attributs “id”: “selectStadt” und “selectHotel”. Diese IDs benötigen wir noch im Java-Script.

Das Java-Script

Die Logik müssen wir nun in etwas Java-Script realisieren:

<script type="text/javascript">
<!--
function changeSelect() {
	
	var selectStadt = document.getElementById("selectStadt");
	var index = selectStadt.selectedIndex;
	
	//alle elemente löschen
	var selectHotel = document.getElementById("selectHotel");

	removeOptions(selectHotel);
	
	//jetzt die neuen Elemente hinzufügen	
	switch (index) {
		case 0: // erste option
			selectHotel.add(generateOption("Hotel Kiwi"), null);	
			selectHotel.add(generateOption("Hotel Spreewald"), null);	
		break;
		
		case 1: //zweite Option
			selectHotel.add(generateOption("Stadthotel"), null);	
			selectHotel.add(generateOption("Pension Tanne"), null);	
		
		break;
		
		case 2: //dritte Option
			selectHotel.add(generateOption("Hotel am Turm"), null);	
			selectHotel.add(generateOption("Hotel Hasen"), null);	
		
		break;
	}
	
}

function removeOptions(selectbox) {
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
        selectbox.remove(i);
    }
}

function generateOption(text) {
	var option=document.createElement("option");
	option.text = text;
	return option;
} 
//-->
</script>

Das ist erstmal eine Menge Code, den gehen wir mal im Detail durch:

var selectStadt = document.getElementById("selectStadt");
var index = selectStadt.selectedIndex;

Hier holen wir uns die Referenz auf die Combo-Box mit den Namen “selectStadt” und dann im zweiten Schritt holen wir uns den ausgewählten Index. Das ist die Nummer des Eintrags. Wie immer in der Informatik hat der erste Eintrag die Nummer 0.

Im zweiten Schritt holen wir uns die Referenz auf die Combo-Box “selectHotel”.

var selectHotel = document.getElementById("selectHotel");

Wir löschen nun alle Einträge dieser Combo-Box, in dem wir die fertige Funktion “removeOptions” aufrufen:

removeOptions(selectHotel);

Nun werden die richtigen Elemente je nach Auswahl hinzugefügt:

case 0: // erste option
	selectHotel.add(generateOption("Hotel Kiwi"), null);	
	selectHotel.add(generateOption("Hotel Spreewald"), null);	
beak;

Für jeden Index legen wir einen derarigen Abschnitt an. Dies ist für die erste Option der Combo-Box “Hotel”. Dort fügen wir jeweils einen Eintrag hinzu:

selectHotel.add(generateOption("Hotel Kiwi"), null);

Jetzt sind wir fast am Ziel, nur beim ersten Aufruf stimmt die Auswahl noch nicht. Dies liegt daran, dass unsere Funktion nur aufgerufen wird, wenn der Benutzer eine Auswahl tätigt. Deshalt müssen wir beim Laden der Seite unsere Funktion “changeSelect” einmal aufrufen.

Dazu fügen wir dem Body-Tag einen entsprechenden Aufruf hinzu:

<body onLoad="changeSelect()">

Im DA-FormMaker Formular, gibt es bereits eine Funktion die aufgerufen wird, hier fügen wir den “changeSelect”-Aufruf einfach hinzu:

<body onLoad="SetCookieValues();changeSelect()">

Das wars. Viel Spaß und Erfolg beim Erweitern des Beispielformulars.

Download Beispiel

Download

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert