3 Selectboxen verknüpfen
BumBumBoris
- javascript
Hallo zusammen!
Folgendes Problem:
Ich möchte eine Suchseite erstellen, in der ich drei verschiedene Selectboxen aufführe. Wähle ich in der ersten Box etwas aus, wird automatisch die 2 Box darauf basierend gefüllt (per PHP und MySQL). Wähle ich dann in der 2 Box etwas aus, wir die 3te gefüllt. Wenn dann in der 3ten Box ein Eintrag ausgewählt wurde, soll eine weitere PHP Datei angestoßen werden.
Ich bin ein absoluter Neuling in Javascript. Daher weiß ich nicht, wie ich das realisieren soll. Ich habe im Internet schon ein bißchen geschaut, weiß aber nicht wie ich es machen soll. Vielleicht kann mir jemand weiterhelfen, wäre echt nett.
Vielen Dank im Voraus.
Gruß
BumBumBoris
Hi
da du eh mit PHP arbeitest bzw. arbeiten willst, kannst du einfach das Formular nach Auswahl eines Wertes abschicken und die Seite entsprechend der übergebenen Werte aufbauen.
so long
Ole
(8-)>
moin BumBumBoris :)
Ich möchte eine Suchseite erstellen, in der ich drei verschiedene Selectboxen aufführe. Wähle ich in der ersten Box etwas aus, wird automatisch die 2 Box darauf basierend gefüllt (per PHP und MySQL). Wähle ich dann in der 2 Box etwas aus, wir die 3te gefüllt. Wenn dann in der 3ten Box ein Eintrag ausgewählt wurde, soll eine weitere PHP Datei angestoßen werden.
Dein Stichwort ist der Eventhandler onchange.
Wenn du das durchgelesen hast und weitere Fragen hast, frag ruhig :)
liebe Grüße aus Berlin
lina-
Hi Lina!
Zuerst einmal vielen Dank für Deine Antwort.
OnChange hatte ich auch schon gefunden, ich weiß aber gar nicht, wie ich da ran gehen soll. Ich möchte 4 Selectboxen miteinander verknüpfen, die erste ist staisch, alle anderen sollen dynamisch sein. Ich weiß auch nicht, wie ich auf das ausgewählte Element zugreifen kann und darauf basierend mein neues SQL Statement zusammen bauen muss. Gibt es da ein Beispiel, wie ich das machen kann?
Vielen Dank für Deine Mühe
Gruß
BumBumBoris
moin BumBumBoris :)
Ich möchte eine Suchseite erstellen, in der ich drei verschiedene Selectboxen aufführe. Wähle ich in der ersten Box etwas aus, wird automatisch die 2 Box darauf basierend gefüllt (per PHP und MySQL). Wähle ich dann in der 2 Box etwas aus, wir die 3te gefüllt. Wenn dann in der 3ten Box ein Eintrag ausgewählt wurde, soll eine weitere PHP Datei angestoßen werden.
Dein Stichwort ist der Eventhandler onchange.
Wenn du das durchgelesen hast und weitere Fragen hast, frag ruhig :)liebe Grüße aus Berlin
lina-
moin BumBumBoris :)
OnChange hatte ich auch schon gefunden, ich weiß aber gar nicht, wie ich da ran gehen soll. Ich möchte 4 Selectboxen miteinander verknüpfen, die erste ist staisch, alle anderen sollen dynamisch sein. Ich weiß auch nicht, wie ich auf das ausgewählte Element zugreifen kann und darauf basierend mein neues SQL Statement zusammen bauen muss. Gibt es da ein Beispiel, wie ich das machen kann?
Da ich leider null Ahnung von PHP habe, musst du diesen Teil selber hinbekommen :/ Ich kann dir aber gerne bei dem Javascript weiterhelfen.
Wenn du den Event onchange abfängst, kannst du mit den Eigenschaften der Select-Optionen selected oder selectedIndex herausfinden, was ausgewählt wurde. Mit diesen Wissen musst du nun dein PHP anschubsen (wie das geht weiss ich leider nicht...)
Vielen Dank für Deine Mühe
Die Mühe liegt auf deiner Seite ;) ich schubs dich nur in die richtige Richtung *G*
liebe Grüße aus Berlin
lina-
Hi!
Genau das ist mein Problem. OnChange ist klar, dass bekomme ich auch abgefangen. Aber dann springt doch JavaScript wieder an und ich weiß nicht, wie ich dann meine PHP Befehle absetzen soll. Das OnChange ruft doch wahrscheinlich eine JavaScript Funktion auf, oder?
Ich finde auch nirgendwo eine Anleitung, die mein Problem beschreibt. Wenn die 2 Box verändert wird, muss eine neue SQL ANweisung basierend darauf erstellt werden. Ich such schon den ganzen Tag, aber irgendwie find eich nichts.
Vielleicht hast Du ja noch einen Tipp.
Gruß
BumBumBoris
moin BumBumBoris :)
OnChange hatte ich auch schon gefunden, ich weiß aber gar nicht, wie ich da ran gehen soll. Ich möchte 4 Selectboxen miteinander verknüpfen, die erste ist staisch, alle anderen sollen dynamisch sein. Ich weiß auch nicht, wie ich auf das ausgewählte Element zugreifen kann und darauf basierend mein neues SQL Statement zusammen bauen muss. Gibt es da ein Beispiel, wie ich das machen kann?
Da ich leider null Ahnung von PHP habe, musst du diesen Teil selber hinbekommen :/ Ich kann dir aber gerne bei dem Javascript weiterhelfen.
Wenn du den Event onchange abfängst, kannst du mit den Eigenschaften der Select-Optionen selected oder selectedIndex herausfinden, was ausgewählt wurde. Mit diesen Wissen musst du nun dein PHP anschubsen (wie das geht weiss ich leider nicht...)Vielen Dank für Deine Mühe
Die Mühe liegt auf deiner Seite ;) ich schubs dich nur in die richtige Richtung *G*liebe Grüße aus Berlin
lina-
moin BumBumBoris :)
Vielleicht hast Du ja noch einen Tipp.
Da ich wirklich keine Ahnung von PHP habe, kann ich nicht weiter ins "blaue" raten. Zeig mir doch mal, was du mit dem onchange machst.
Wenn du den Event abfängst, kannst du eine Javascript-Funktion aufrufen...
z.b. <select [...] onchange="foo(this);"></select>
die Funktion in deinem Javascript-Bereich (oder in einer externen Datei)sieht dann so aus:
function foo(el){
var index=el.selectedIndex;
el.form.submit() //zugehörige Form absenden
}
Ich nehme stark an, dass du die Form für dein PHP-Geraffen absenden musst...
Also entweder erklärst du mir wie PHP funktioniert oder du findest selber heraus wie javascript damit umgeht ;) Weiter raten kann ich nicht.
liebe Grüße aus Berlin
lina-
Hi!
Zuerst einmal vielen Dank für Eure Mühen!
Ich habe mir, nachdem ich keine Lösung gefunden habe, die mir gefällt, eine PHP Lösung ausgedacht. Diese habe ich gerade umgesetzt und damit bin ich zufrieden.
Trotzdem bedanke ich mich sehr, dass ihr Euch die Sachen angesehen habt.
Viele Grüsse
BumBumBoris
moin BumBumBoris :)
Vielleicht hast Du ja noch einen Tipp.
Da ich wirklich keine Ahnung von PHP habe, kann ich nicht weiter ins "blaue" raten. Zeig mir doch mal, was du mit dem onchange machst.
Wenn du den Event abfängst, kannst du eine Javascript-Funktion aufrufen...
z.b. <select [...] onchange="foo(this);"></select>
die Funktion in deinem Javascript-Bereich (oder in einer externen Datei)sieht dann so aus:function foo(el){
var index=el.selectedIndex;
el.form.submit() //zugehörige Form absenden
}Ich nehme stark an, dass du die Form für dein PHP-Geraffen absenden musst...
Also entweder erklärst du mir wie PHP funktioniert oder du findest selber heraus wie javascript damit umgeht ;) Weiter raten kann ich nicht.liebe Grüße aus Berlin
lina-
PS: es ist auch nicht nötig, dass du mein ganzes Posting zitierst ;) Ich weiss was ich geschrieben habe *g*
liebe Grüße aus Berlin
lina-
Hi!
Hier mal der gesamte Quellcode der Seite, die ich bislang erstellt habe:
<?php
echo "<form name="search" method="POST" action="./index.php?id=10">";
echo "<h1>Suche</h1>";
echo "<ol>";
echo "<li>Hersteller des Fahrzeuges auswählen";
echo "<li>Fahrzeugtyp auswählen";
echo "<li>Modell auswählen<br> <br>";
echo "</ol>";
echo "<table width="80%" cellspacing=2 cellpadding=2 border=0>";
echo "<tr>";
echo "<td id=suche width="30%" valign="top">";
echo "<b>Kategorie:</b>";
echo "</td>";
echo "<td id=suche valign=top>";
echo "<select name="kategorie" size="1" onChange="redirect(this.options.selectedIndex)">";
echo "<option selected>Bitte wählen Sie aus...</option>";
echo "<option>PKW</option>";
echo "<option>NKW</option>";
echo "<option>Motorräder</option>";
echo "</select>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td id=suche width="30%" valign="top">";
echo "<b>Hersteller:</b>";
echo "</td>";
echo "<td id=suche valign=top>";
echo "<select name="hersteller" size="1">";
echo "<option selected>Bitte wählen Sie aus...</option>";
echo "</select>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td id=suche width="30%" valign="top">";
echo "<b>Fahrzeugtyp:</b>";
echo "</td>";
echo "<td id=suche valign=top>";
echo "<select name="fahrzeugtyp" size="1">";
echo "<option selected>Bitte wählen Sie aus...</option>";
echo "</select>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td id=suche width="30%" valign="top">";
echo "<b>Modellreihe:</b>";
echo "</td>";
echo "<td id=suche valign=top>";
echo "<select name="modell" size="1" >";
echo "<option selected>Bitte wählen Sie aus...</option>";
echo "</select>";
echo "</td>";
echo "</tr>";
echo "</table>";
// Hier werden sechs Arrays in Javascript erzeugt, denen später ein PHP Array zugewiesen wird.
echo "<script>";
echo "var pkw_array = new Array()"; // Array für PKW's
echo "</script>";
echo "<script>";
echo "var nkw_array = new Array()"; // Array für NKW's
echo "</script>";
echo "<script>";
echo "var motorrad_array = new Array()"; // Array für Motorräder
echo "</script>";
$pkw = array(); // PHP Array für pkw
$nkw = array(); // PHP Array für nkw
$motorrad = array(); // PHP Array für motorräder
$p = 0; // Zählvariable für die Arrays der pkw
$n = 0; // Zählvariable für die Arrays der nkw
$m = 0; // Zählvariable für die Arrays der motorräder
$query1 = "Select Distinct Hersteller from z_zuordnung_pkw group by Hersteller"; // SQL-Statement erstellen
$query2 = "Select Distinct Hersteller from z_zuordnung_nkw group by Hersteller"; // SQL-Statement erstellen
$query3 = "Select Distinct Hersteller from z_zuordnung_motorrad group by Hersteller"; // SQL-Statement erstellen
$result1 = mysql_query($query1);
$result2 = mysql_query($query2);
$result3 = mysql_query($query3);
$text = "Bitte wählen Sie aus...";
$pkw[$p] = $text;
$nkw[$n] = $text;
$motorrad[$m] = $text;
echo "<script>";
echo "pkw_array["$p"] = "$pkw[$p]"";
echo "</script>";
echo "<script>";
echo "nkw_array["$n"] = "$nkw[$n]"";
echo "</script>";
echo "<script>";
echo "motorrad_array["$m"] = "$motorrad[$m]"";
echo "</script>";
$p = 1;
$n = 1;
$m = 1;
while($row1 = mysql_fetch_array($result1)) // Array für PKW
{
$pkw[$p] = $row1[0];
echo "<script>";
echo "pkw_array["$p"] = "$pkw[$p]"";
echo "</script>";
$p = $p + 1;
}
while($row2 = mysql_fetch_array($result2)) // Array für Motorradbatterien füllen
{
$nkw[$n] = $row2[0];
echo "<script>";
echo "nkw_array["$n"] = "$nkw[$n]"";
echo "</script>";
$n = $n + 1;
}
while($row3 = mysql_fetch_array($result3)) // Array für Antrieb und Beleuchtung füllen
{
$motorrad[$m] = $row3[0];
echo "<script>";
echo "motorrad_array["$m"] = "$motorrad[$m]"";
echo "</script>";
$m = $m + 1;
}
echo "</form>";
mysql_close();
?>
<script>
var groups=document.search.kategorie.options.length
var group=new Array(groups)
var temp = new Array()
for (i=0; i<groups; i++)
group[i]=new Array()
for (i=0; i<<? echo $p; ?>; i++){
group[1][i] = new Option(pkw_array[i])
}
for (i=0; i<<? echo $n; ?>; i++){
group[2][i] = new Option(nkw_array[i])
}
for (i=0; i<<? echo $m; ?>; i++){
group[3][i] = new Option(motorrad_array[i])
}
var temp=document.search.hersteller
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
</script>
Gruß
BumBumBoris
PS: es ist auch nicht nötig, dass du mein ganzes Posting zitierst ;) Ich weiss was ich geschrieben habe *g*
liebe Grüße aus Berlin
lina-
moin BumBumBoris :)
Ich habe mir das jetzt ein paar mal durchgelesen... aber ich verstehe es nicht ganz. Vielleicht sollte hier doch jemand ran, der PHP kann ;)
Rein nach meinem Gefühl her würde ich behaupten, du musst herausfinden, welches von den PHP-Arrays je nach Selection gemeint ist und mit diesen Werten dann das zweite Select füllen. Wenn ich den Code richtig verstanden habe, weisst du ja welches Array zu welcher Selection gehört oder?
liebe Grüße aus Berlin
lina-