PHP SQL Dropdown Menüs

[orbit]

Hallo,

ich habe 2 Dropdown Menüs. Wenn man beim 1. Menü etwas auswählt, soll das 2. Menü darauf reagieren. Ich denke mal ich muss den Menüs Namen zuweisen um dann das 2. Menü über einen "onclick" vom 1. Menü reagieren zu lassen. Nur leider weiß ich nicht genau wie und finde nicht das richtige

Hier ist der Code vom 1. Menü, der vom 2. sieht zurzeit noch genauso aus.

<select>
<?php
$sql = "SQL ANWEISUNG";
	$result = mysql_query($sql) OR die(mysql_error());
		while($row = mysql_fetch_assoc($result)) {
echo "<option>" . $row['Name'] . "</option>"; 
}
?>
</select>

Außerdem soll nach der Auswahl beim 2. Menü ein Text erscheinen.
Kann mir da jemand weiterhelfen?

 

[Lawnmower]

nicht bei onclick sondern eher bei onchange. Und das macht man dann mit Javascript, eine Variante wäre per AJAX an den Server die Auswahl aus dem 1. Dropdown zu übergeben (eben per onchange Event) welcher dann das 2. Dropdown füllt und aktiv setzt.

 

[Yuuri]

Oder alle möglichen Varianten übertragen und mit JavaScript und der CSS-Eigenschaft display handtieren (weniger elegant, aber einfacher für Anfänger).

 

[neo-logism]

@Yuuri: das ist sogar die einzig sinnvolle Variante... Menüs mit Javascript "nachzuladen" seien die SQL Anfragen auch gecacht, bleibt dennoch inperformant (nachladen).
@der_noname: Wie Yuuri schon sagte, macht man das mit <div> Blöcken, die dann via display:none versteckt werden....

kleines beispiel (kannst du dann ja entsprechend mit daten aus dem PHP befüllen...) expemplarisch mit JQuery

// JQuery-Code
$(function () {
    $('.submenu').hide();

    $('.menu').onclick(function () {
        // alle Untermenüs verstecken
        $('.submenu').hide();
        // Untermenü anhand der ID des geklickten Elements anzeigen
        $('.' + $(this).attr('id')).show();
    );
});

<div>
    <span class="menu" id="one">Eintrag1</span>
    <span class="menu" id="two">Eintrag2</span>
    <span class="menu" id="three">Eintrag3</span>
</div>
<div class"submenu one">
    <span>Untermenü1</span>
    <span>Untermenü2</span>
</div>
<div class"submenu two">
    <span>Untermenü1</span>
    <span>Untermenü2</span>
</div>
<div class"submenu three">
    <span>Untermenü1</span>
    <span>Untermenü2</span>
</div>

PS: Nachladen hat noch einen Weiteren Nachteil: Schlecht für SEO, da nicht alle Informationen verfügbar sind....

 

[Lawnmower]

das ist sogar die einzig sinnvolle Variante... Menüs mit Javascript "nachzuladen" seien die SQL Anfragen auch gecacht, bleibt dennoch inperformant (nachladen).

Kommt auf die Datenmenge an - wenn sehr viel vorgeladen muss ist das genauso Unsinn für die Performance weil man möglicherweise als User diese Informationen gar nie braucht. Sprich es werden Daten geladen die man nicht zu Gesicht bekommt. Kommt dazu dass der DB Server bereits Abfragen durchführen muss die der Besucher möglichrweise gar nie braucht weil das 2. Dropdown gar nie benutzt wird. So eine einzelne weitere HTTP Abfrage stört da nicht im geringsten und kratzt den Webserver überhaupt nicht - schliesslich führt jeder Besucher meistens zig solcher Anfragen aus bei jedem Aufruf einer Seite.
Aber eben - hängt alt vom Einsatzzweck und der Datenmenge ab - für ein paar Einträge im 2. Dropdown macht ein AJAX Request freilich kein Sinn.

Nachladen hat noch einen Weiteren Nachteil: Schlecht für SEO, da nicht alle Informationen verfügbar sind....

Muss es auch nicht - ist in einem Dropdownfeld. Wenns anders wäre stimme ich Dir zu.
Und wenn Du schon SEO als Argument bringst dann wären Listen (ul,li) sinnvoller anstatt eine Div Suppe.

 

[neo-logism]

@Lawnmower: Ja, sicher ist div nicht die beste Methode, aber es sollte nur ein "wie kann man das realisieren" sein.

Zur Menge der Daten: Es ging um 2 stufiges Menü, wären es 4-5 Stufen sähe das schon wieder anders aus. Zudem ging es nicht um die Antwortzeit des Servers sondern um die "Wartezeit" des "Kunden":

(Ja, ich komme aus dem Bereich, wo jede Sekunde zählt ^^)

 

[Daaron]

Kommt auf die Datenmenge an - wenn sehr viel vorgeladen muss ist das genauso Unsinn für die Performance weil man möglicherweise als User diese Informationen gar nie braucht. Sprich es werden Daten geladen die man nicht zu Gesicht bekommt.

Eine statische Lösung kann beim Client gecached werden, ne AJAX-Lösung macht sowas durchaus schwerer.

Und nicht nur SEO ist ein gutes Argument gegen AJAX-Inhalte. Nicht jeder potentielle User hat JS aktiv. Es gibt sehr viele User mit aktivem NoScript, die schließt du schon mal komplett aus bei jeglichen JS-basierten Menüs (und sei es ein einfaches Suckerfish). Dazu kommen dann noch all die potentiellen Kunden, die von einer Sehbehinderung dazu gezwungen werden, über Screenreader oder Braille-Terminals zu surfen... Und dann gibts da noch Freaks wie mich, die durchaus auch mal mit Lynx surfen.

JavaScript in jeglicher Form ist das letzte Mittel, nicht das erste. Erst löst man es über HTML, dann über CSS und erst wenn alle Stricke reißen kommt JS. Gerade Dropdown-Menüs sind in CSS echt keine Hürde, vorausgesetzt man ignoriert den IE6, wie er es verdient. Für aktuelle Versionen von FF und Chrome kann man den ganzen Kram sogar noch animieren, ohne eine Zeile JS zu schreiben.