ich wollte eine Verkettete Auswahlliste ihr einfügen i-wie klappt das nicht
Code wo ich es einbinden will
<!--@title=Downloads@--><!--@hmenu=Anleitungen@--><!--@view=normal@--><!--@viewoptions=@--><!--@wysiwyg=1@--><style>
a:hover { color:#09C; text-decoration:underline; }
</style>
<?php
defined ('main') or die ('no direct access');
if(loggedin()) {
echo 'DU BIST ANGEMELDET';
} else {
echo '<font color="#00FF00"><font size="2"><div style="margin-left:16%;display-inline;">
<br><br><br><br><br><br><font color="#ccc"> <font size="3"><strong><div style="margin-left:28%;display-inline;">Anleitungen</div></strong></font></font><br>Die Anleitungen sind nur für Registrierte Benutzer gedacht.<br>
<br>
Bitte registrieren sie sich um die Anleitungen sehen zu können.<br>
<br>
Oder loggen sie sich mit ihrem Benutzername und Passwort ein.</div></font></font>
<br>
}
?>
Verkettete Auswahlliste
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Beispiel 1</title>
<script type="text/javascript" src="terminAuswahl.js"></script>
<script type="text/javascript" src="LinkedSelection.js"></script>
<script type="text/javascript">
/**
* Diese Callback-Funktion soll beim Abschliessen der Auswahlstrecke und beim
* Ändern der Auswahl in einer der Auswahllisten aufgerufen werden.
* @param selected ein Array mit den Daten der jeweiligen Auswahllisten
* (leer, wenn Strecke nicht abgeschlossen)
**/
function ergebnisZeigen( selected )
{
if( selected.length )
{
/*
* Auswahlstrecke wurde beendet
*/
// Visualisierung der Auswahlsrecke
var sel = '';
var val = '';
var txt = '';
for( var i = 0; i < selected.length; i++ )
{
sel += ( i>0 ? ' ' : '') + selected[i].id;
val += ( i>0 ? ' ' : '') + selected[i].value;
txt += ( i>0 ? ' ' : '') + selected[i].text;
}
var output = '<h4>Info:<'+'/h4><p>' + val +
'<'+'/p>';
}
else
{
/*
* Auswahlstrecke wurde noch nicht beendet
*/
// Hinweis zur Auswahl in der nächsten Auswahlliste
var output = '<p>Wählen Sie eine Option aus der nächste Auswahlliste.<'+'/p>';
}
var ergebnisObj = document.getElementById( 'ergebnis' ).innerHTML = output;
};
window.onload = function()
{
var vk = new LinkedSelection( [ 'professor', 'lesung', 'termin' ], ergebnisZeigen, terminAuswahl );
}
var terminAuswahl = {
'professor' : {
'p23' : ['', 'Albers, Alfred'],
'p24' : ['p24', 'Braun, Berta'],
'p25' : ['p25', 'Drachenzaun, Doris'],
'p26' : ['p26', 'Müller, Stephan'],
'p27' : ['p27', 'Meier, Manfred']
},
'lesung' : {
' ' : [
['sdsdsddsdsdsdddsd', 'OS X Lion'],
['l56', 'OS Snow Leopard'],
['l56', 'IOS Jailbreak']
],
'p24' : [
['l65', 'Linux'],
],
'p25' : [
['l75', 'Windows 95'],
['l76', 'Windows 98'],
['l77', 'Windows ME'],
['l78', 'Windows NT'],
['l79', 'Windows 2000'],
['l80', 'Windows 2003'],
['l81', 'Windows XP'],
['l82', 'Windows Vista'],
['l83', 'Windows 7'],
['l84', 'Windows 8']
],
},
};
/**
* LinkedSelection ist ein Klasse zur Steuerung dynamisch verketteter Auswahllisten
* @param inputSelects ein Array mit den IDs der Auswahllisten in hierarchischer Reihenfolge
* Bsp: [ 'select1', 'select2', 'select3' ]
* @param callback Funktion, welche beim Abschließen (und Ändern) der Auswahl aufgerufen werden soll
* @param data das Daten-Objekt in JSON
* Bsp: { 'select1':['wert1','text1'], 'select2':['wert5','text5'] }
**/
function LinkedSelection( inputSelects, callback, data )
{
var self = this; /* um aus EventHandlern auf diese Instanz zugreifen zu können */
var selects = new Array(); /* Liste der verketteten Auswahllisten */
/**
* Die Funktion changeHandler wird dem onchange-Handler jeder Auswahlliste zugewiesen.
* Wenn eine gültige Auswahl getroffen wurde, soll entweder die als nächste
* Auswahlliste (nextSelect) bekannte Auswahlliste mit Daten befüllt werden,
* oder die Callback-Funktion ausgeführt werden.
**/
var changeHandler = function()
{
var value = this.selectedValue();
// Auf die nächste Auswahlliste folgende Auswahllisten müssen wieder
// in den default-Zustand versetzt werden
if( typeof(this.nextSelect) == 'object' )
{
for( var i = this.nextSelect.selectID + 1; i < selects.length; i++ )
selects[i].replaceOptions( new Array() );
}
// Abbrechen, wenn ein Dummy-Wert ausgewählt wurde
if( value == '--' )
{
if( this.selectID < selects.length )
selects[ this.selectID +1 ].replaceOptions( new Array() );
return;
}
if( typeof(this.nextSelect) == 'object' )
{
/*
* nextSelect ist eine Auswahlliste
*/
// Wenn keine Daten zur gemachten Auswahl zur Verfügung stehen,
// müssen wir sicherstellen, dass wir auf keine nicht vorhandenen Objekte zugreifen.
if( !data[ this.nextSelect.id ][ value ] )
{
if( !data[ this.nextSelect.id ] )
data[ this.nextSelect.id ] = {};
data[ this.nextSelect.id ][ value ] = new Array();
}
// Neue Optionen in der nächsten Auswahlliste setzen
this.nextSelect.replaceOptions( data[ this.nextSelect.id ][ value ] );
// Wenn die Auswahlstrecke nicht beendet ist, muss die Callback-Funktion
// dennoch aufgerufen werden, damit entsprechend auf Änderungen
// reagiert werden kann.
callback( new Array() );
}
else
{
/*
* Die Auswahlstrecke ist absolviert
*/
// Wahlen der einzelnen Listen in ein Array schreiben um
// dieses an die Callback-Funktion zu übergeben.
var selected = new Array();
for( var i = 0; i < selects.length; i++ )
{
selected.push( { 'id' : selects[i].id,
'value': selects[i].selectedValue(),
'text' : selects[i].selectedText() } );
}
callback( selected );
}
};
/**
* replaceOptions ersetzt die aktuellen Optionen der Auswahlliste durch
* die im Array newOptions gelieferten Daten. Wenn ein leeres Array übergeben
* wird, wird die default-Option "--" gesetzt.
* @param newOptions ein Array mit den neuen Optionen
* Bsp: [ ['value1','text1'], ['value2','text2'], ]
**/
var replaceOptions = function( newOptions )
{
/*
* Diese Funktion setzt bewusst DOM-Methoden ein und verzichtet
* auf die vom Options-Objekt gegebenen Möglichkeiten.
*/
// alte Optionen der Auswahlliste löschen
var opts = this.getElementsByTagName( 'option' );
while( opts.length > 0 )
this.removeChild( opts[0] );
// wenn keine neuen Optionen übergeben wurden, default-Option setzen
// andernfalls "Bitte wählen" voranstellen
if( newOptions.length == 0)
this.addOption( '--', '------' );
else
this.addOption( '--', 'Bitte wählen:' );
// neue Optionen in die Auswahlliste schreiben
for( var i = 0; i < newOptions.length; i++ )
this.addOption( newOptions[i][0], newOptions[i][1] );
};
/*
* Fügt der Auswahlliste eine neue Option hinzu
* @param value Wert der neuen Option
* @param text Name der neuen Option
*/
var addOption = function( value, text )
{
var opt = document.createElement( 'option' );
opt.value = value;
opt.appendChild( document.createTextNode( text ) );
this.appendChild( opt );
};
/**
* holt den Wert der aktuell gewählten Option
* @returns den Value der aktuell gewählten Option
**/
var selectedValue = function()
{
return this.options[ this.selectedIndex ].value;
};
/**
* holt den Text (Name) der aktuell gewählten Option
* @returns den Text der aktuell gewählten Option
**/
var selectedText = function()
{
return this.options[ this.selectedIndex ].text;
};
/**
* Selektiere die Option mit dem Wert value, wenn keine Option mit dem Wert
* value existiert, wird die Auswahl nicht geändert.
* @param value der Wert den eine Option haben muss, um ausgewählt zu werden.
**/
var selectByValue = function( value )
{
for( var i = 0; i < this.options.length; i++ )
{
if( this.options[i].value == value )
this.selectedIndex = i;
}
}
/**
* Initialisiere den Manager für verkettete Auswahllisten.
* Findet Auswahllisten anhand der (per inputSelects) bekannten IDs.
* Bestückt die Auswahllisten mit den nötigen Funktionen und Event-Handlern
**/
this.init = function()
{
// bestücke bestehende selects
for( var i = 0; i < inputSelects.length; i++ )
{
var t = document.getElementById( inputSelects[i] );
// ignoriere falsche IDs
if(!t)
continue;
// neue Funktionen und Event-Handler zuweisen und in selects registrieren
t.replaceOptions = replaceOptions;
t.addOption = addOption;
t.selectedValue = selectedValue;
t.selectedText = selectedText;
t.selectByValue = selectByValue;
t.selectID = selects.length;
t.onchange = changeHandler;
selects.push( t );
// registriere Auswahlliste als nextSelect bei der vorhergehenden
if( selects.length > 1 )
selects[ selects.length-2 ].nextSelect = t;
}
};
// initialisieren!
this.init();
}
</script>
</head>
<body>
<h1>Beispiel 1</h1>
<p>Bitte wählen Sie in der folgenden Auswahlliste eine Betriebssytem</p>
<p>
<label id="professorLabel" for="professor">Hersteller</label>
<select id="professor">
<option value="--">Hersteller wählen:</option>
<option value=" ">Apple</option>
<option value="p24">Linux</option>
<option value="p25">Windows</option>
</select>
<label id="lesungLabel" for="lesung">Betriebssystem:</label>
<select id="lesung">
<option value="--">------</option>
</select>
</p>
<div id="ergebnis"></div>
</body>
</html>
