<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
/* 2004, SelectGruppe aufbauen, Autor: Quaese */
var arrGroups = new Array();
// Werte (values) und Texte der ersten Options-Gruppe
arrGroups[0] = new Array();
arrGroups[0]["o1_value"] = "o1_text"; // Key: Wert der bei "value" erscheinen soll; Wert: Text, der erscheinen soll
arrGroups[0]["o2_value"] = "o2_text";
arrGroups[0]["o3_value"] = "o3_text";
// Werte (values) und Texte der zweiten Options-Gruppe
arrGroups[1] = new Array();
arrGroups[1]["a1_value"] = "a1_text";
arrGroups[1]["a2_value"] = "a2_text";
arrGroups[1]["a3_value"] = "a3_text";
arrGroups[1]["a4_value"] = "a4_text";
/* ************************************************************************** *
* Funktion, die eine zweite Select-Gruppe in Anhängigkeit der Auswahl in *
* einer ersten Select-Box aufbaut. *
* Parameter: objForm - Formular, in dem beide SelectBoxen enthalten sind *
* objSelVar - Objekt der ersten Select-Box *
* strChangeKombo - Name der zweiten Select-Box *
* (wie im name-Attribut angegeben) *
* ************************************************************************** */
function changeSelect(objForm, objSelVar, strChangeKombo){
// Objekt des Selektbereichs, der geändert werden soll
var objSel = objForm.elements[strChangeKombo];
// Array zur ausgewählten Option holen
arrFeld = arrGroups[objSelVar.selectedIndex];
// Optionen der zweiten Select-Box löschen
objSel.length = 0;
for(varKey in arrFeld){
// Neue Option erstellen
objOpt = new Option(arrFeld[varKey], varKey, false, false);
// Neue Option in Select-Struktur einhängen (immer an letzte Stelle)
objForm.selTest.options[objForm.selTest.length] = objOpt;
}
}
-->
</script>
</head>
<body>
<form action="" method="post">
Bei Auswahl einer Option im linken Select-Bereich ändern sich die<br />
Objekte im rechten Bereich.
<p>
<select name="changeSel" onchange="changeSelect(this.form, this, 'selTest');">
<option value="arrGroup1" />arrGroup1
<option value="arrGroup2" />arrGroup2
</select>
<select name="selTest" size="1">
<option value="o1_value" />o1_text
<option value="o2_value" />o2_text
<option value="o3_value" />o3_text
</select>
</p>
</form>
</body>
</html>
