Möchte 'teil-dynamische' Seite

Computer: Software & Programmierung HTML & CSS
#1

Liebe Leute,

ich möchte eine Site, wo sich nur 1 kleiner Teil der Seite dynamisch verändert, wenn eine bestimmte Option gewählt wird. Es soll also so sein, dass ein bestimmter Textabschnitt eingeblendet wird, wenn in einem Dropdown-Menu eine Möglichkeit ausgesucht wird.

Wie kann man das anstellen?

Ganz konkret:
Ich mache ein Dropdown-Menu wo Städte zur Auswahl stehen. Sobald eine Stadt ausgewählt wird, sollen dazugehörige Informationen eingeblendet werden. Diese Informationen sind in diesem Fall Fluggesellschaft und Zielflughafen. Optimalerweise ist die Fluggesellschaft verlinkt.

Das klingt eigentich nach einer Minidatenbank, wäre kein Problem mit MySQL. Aber ist das wirklich notwendig?

Das Problem, das ich aber nicht lösen kann ist, dass ich das erwähnte „Einbleden“ mir so vorstelle, dass die Seite sich eben sonst nicht verändert. Wenn ich eine Stadt auswähle, sollen dazu passende Texteile (Fluggesellschaft und Zielflughafen) erscheinen, ohne das die Seite neu geladen wird (zumindest nicht optisch, dass sie komplett verschwindet und dann neu aufgebaut wird). Ich habe das schon öfter gesehen, dass sobald man irgendwas auswählt ein entsprechender Abschnitt ein- oder ausgeblendet wird. Zuletzt habe ich das bei www.orange.at gesehen: wenn man die Zahlungsmethode auswählte wurde der Text und weitere Felder entsprechend verändert.

Der Hintergrund:
Ich möchte kurz erwähnen, wie man am besten ein bestimmtes Zile erreicht. Ich könnte natürlich einfach im Text alle Städte aufzählen (z.B. Von München mit Niki nach Wien). Aber das will ich nicht! Die Aufzählung soll nicht viel Platz wegnehmen.

Ich brauche bitte eine Anleitung sowohl für das Dropdown-Menu (sobald eine Stadt ausgewählt wird also angeklickt wird, soll das Formular abgeschickt werden - also nicht erst nach drücken von „senden“), sowie alles andere.

#2

Hallo Henry,

du könntest deine daten, falls nicht so viele, direkt in den code „hardcodieren“, sprich z.B. als ein Array einfügen oder aus einer Textdatei lesen oder eben wie du selbst gemeint hast mit Hilfe einer SQL-Tabelle.

Was du auf jeden Fall für dieses „dynamische Einblenden“ brauchst, ist JAVASCRIPT. Wenn du deine Daten aus einer SQL-Datenbank lesen willst, dann solltest du dir auf jeden Fall mal AJAX ansehen (beinhaltet auch JAVASCRIPT).

Als Beispiel habe ich folgende Seite auf die Schnelle gefunden. Hier reagiert eine Dropdownbox auf die andere und ändert dementsprechend seinen Inhalt.

http://www.drweb.de/magazin/javascript-dynamische-dr…

Ich bin mir aber sicher, dass du bei einer google-Suche auch nochmal mehr finden wirst, wobei du auch mit diesem Tutorial dein Problem lösen können solltest.

Viel Erfolg
CC

#3

Sollt er sein Anliegen mit einer SQL-Datenbank lösen wollen, wird JavaScript/AJAX alleine nicht ausreichen. Wenn es sich um feste Texte handelt, wäre die einfachste Variante diese in einem JavaScript - wie auch schon erwähnt wurde - „hardcoded“ (also direkt im Quelltext der Seite) zu verwenden, um die Anpassung dynamisch rein über JavaScript laufen zu lassen.

Am Einfachsten arbeitest du hierbei dann mit „innerHTML“, als Eigenschaft des Elements, in das du den Text einfügen willst. Als Element würde ich einen DIV-Container nutzen mit einer ID, sodass du über:

document.getElementById (‚ID‘).innerHTML = „Text“;

darauf zugreifen kannst. Da hast du auch gleich schon ein Beispiel, wie man Texte innerhalb von HTML-Elementen ändern kann.

SelfHTML sollte dir dann helfen, den Rest auch zu realisieren.

#4

Hallo,

Danke für euere Ratschläge!

…die einfachste Variante diese in
einem JavaScript - wie auch schon erwähnt wurde - „hardcoded“
(also direkt im Quelltext der Seite) zu verwenden, um die
Anpassung dynamisch rein über JavaScript laufen zu lassen.

Am Einfachsten arbeitest du hierbei dann mit „innerHTML“, als

Ich möchte die einfachste Methode wählen, gerne verzichte ich auf SQL - um so besser! Es sind nur kleine Textteile und es ist nicht so umfangreich, somit ist das „hardcoren“ das beste.

Ich brauche aber bitte mehr Hilfestellung mit JavaScript. Damit kenne ich mich NICHT aus!

Zu bedenken ist auch, dass schon beim anklicken im Menu die Funktion losgehen soll. Daher habe ich von einer alten Drop Down Navigation folgendes Beispiel rausgesucht.

im Head:

<!–
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location=’"+selObj.options[selObj.selectedIndex].value+"’");
if (restore) selObj.selectedIndex=0;
}
//–>

Im body:

aboutarchivcharts

Ist es irgendwie zunutze? Kann ich es zumindest teilweise brauchen und so umstricken, dass es für diesem Fall funktioniert?

Die Frames müssen weg und was kommt in die values?

Habe bei selfHTML folgendes gefunden:

var Neu = „neuer <b>fetter</b> Text“;
function Aendern () {
document.all.meinAbsatz.innerHTML = Neu;
}
Text
[Anderer Text](javascript:Aendern())