bigbossmen
New member
hallo leute
bin neu hier und hab von javascript absolut keine bis wenig ahnung und hoffe ihr könnt mir helfen
ich habe im netz ein selectmenü gefunden welches nur über html und javascript läuft
jetzt möchte ich das wenn der user im letzten feld den typ auswählt das dann zu genau diesem die seite geöffnet wird
hier mal die quellcodes:
index.html
terminAuswahl.js
und die
LinkedSelection.js
nicht lachen bastel gerade an den codes rum damit es passt
die ausgabe nach der auswahl zb Hersteller: Audi Modell: 100 (43, C2) [06/1976 - 07/1982] Typ/Motor: 1.6[63 KW / 86PS] soll auf eine url erfolgen zb auto1.tld.
hoffe ihr könnt mir helfen
grüße
bin neu hier und hab von javascript absolut keine bis wenig ahnung und hoffe ihr könnt mir helfen
ich habe im netz ein selectmenü gefunden welches nur über html und javascript läuft
jetzt möchte ich das wenn der user im letzten feld den typ auswählt das dann zu genau diesem die seite geöffnet wird
hier mal die quellcodes:
index.html
HTML:
<!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=utf-8">
<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;
}
/*
* Auswahlstrecke wurde noch nicht beendet
*/
// Hinweis zur Auswahl in der nächsten Auswahlliste
}
var ergebnisObj = document.getElementById( 'ergebnis' ).innerHTML = output;
};
window.onload = function()
{
var vk = new LinkedSelection( [ 'professor', 'lesung', 'termin' ], ergebnisZeigen,terminAuswahl );
}
</script>
</head>
<body>
<h1>Fahrzeugauswahl</h1>
<p>Bitte wählen Sie Ihr Fahrzeug.</p>
<p>
<label id="professorLabel" for="professor">Fahrzeughersteller:</label>
<select id="professor">
<option value="--">Bitte Hersteller wählen:</option>
<option value="p23">ALPINE</option>
<option value="p24">ALFA ROMEO</option>
<option value="p25">AUDI</option>
<option value="p26">AUSTIN</option>
<option value="p27">BMW</option>
<option value="p28">BMW</option>
</select>
<label id="lesungLabel" for="lesung">Modell:</label>
<select id="lesung">
<option value="--">Bitte Modell wählen</option>
</select>
<label id="lesungTermin" for="termin">Typ/Motor:</label>
<select id="termin">
<option value="--">Bitte Typ/Motor wählen</option>
</select>
</p>
<div id="ergebnis"></div>
</body>
</html>terminAuswahl.js
Code:
var terminAuswahl = {
'professor' : {
'p23' : ['p23', 'Albers, Alfred'],
'p24' : ['p24', 'Braun, Berta'],
'p25' : ['p25', 'AUDI'],
'p26' : ['p26', 'Müller, Stephan'],
'p27' : ['p27', 'Meier, Manfred']
},
'lesung' : {
'p23' : [
['l55', 'Katzen in der freien Wildbahn'],
['l56', 'Katzen im Gefängnis'],
['l56', 'Katzen in Australien']
],
'p24' : [
['l65', 'Hunde im Himmel'],
['l66', 'Hunde in der Hölle'],
['l66', 'Höllenhunde']
],
'p25' : [
['l75', '100 (43, C2) [06/1976 - 07/1982]'],
['l76', 'Wirtschaftskram II'],
['l76', 'Wirtschaftskram III']
],
'p26' : [
['l85', 'Technologie in der Steinzeit'],
['l86', 'Technologie in der Bronzezeit'],
['l86', 'Technologie heute']
],
'p27' : [
['l95', 'Althochdeutsch'],
['l96', 'Mittelhochdeutsch'],
['l96', 'Deutsch für Angefangene']
]
},
'termin' : {
'l55' : [
['t123', 'Freitags 10 - 12'],
['t124', 'Sonntags 18 - 20']
],
'l56' : [
['t125', 'Montags 12 - 14'],
['t126', 'Dienstags 8 - 10']
],
'l57' : [
['t127', 'Dienstags 10 - 12'],
['t128', 'Mittwochs 13 - 15']
],
'l65' : [
['t133', 'Freitags 10 - 12'],
['t134', 'Sonntags 18 - 20']
],
'l66' : [
['t135', 'Montags 12 - 14'],
['t136', 'Dienstags 8 - 10']
],
'l67' : [
['t137', 'Dienstags 10 - 12'],
['t138', 'Mittwochs 13 - 15']
],
'l75' : [
['t143', '1.6[63 KW / 86PS]'],
['t144', 'Sonntags 18 - 20']
],
'l76' : [
['t145', 'Montags 12 - 14'],
['t146', 'Dienstags 8 - 10']
],
'l77' : [
['t147', 'Dienstags 10 - 12'],
['t148', 'Mittwochs 13 - 15']
],
'l85' : [
['t153', 'Freitags 10 - 12'],
['t154', 'Sonntags 18 - 20']
],
'l86' : [
['t155', 'Montags 12 - 14'],
['t156', 'Dienstags 8 - 10']
],
'l87' : [
['t157', 'Dienstags 10 - 12'],
['t158', 'Mittwochs 13 - 15']
],
'l95' : [
['t163', 'Freitags 10 - 12'],
['t164', 'Sonntags 18 - 20']
],
'l96' : [
['t165', 'Montags 12 - 14'],
['t166', 'Dienstags 8 - 10']
],
'l97' : [
['t167', 'Dienstags 10 - 12'],
['t168', 'Mittwochs 13 - 15']
]
}
};und die
LinkedSelection.js
Code:
/**
* 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();
}nicht lachen bastel gerade an den codes rum damit es passt
die ausgabe nach der auswahl zb Hersteller: Audi Modell: 100 (43, C2) [06/1976 - 07/1982] Typ/Motor: 1.6[63 KW / 86PS] soll auf eine url erfolgen zb auto1.tld.
hoffe ihr könnt mir helfen
grüße
Zuletzt bearbeitet von einem Moderator: