nicht angemeldet
Datalist mit vorherigem Dropdown verknüpfen
MudGuard
JürgenBMoin
Ich habe ein Problem mit einer erstellten Übersicht.
In dieser Übersicht kann man alle Steckerkontakte die vorhanden sind suchen. Es wird unterschieden in Artikelnummer, Hersteller, Herstellernummer und Produktfamilie.
Bisher war es so dass man für alle Sachen nur ein Eingabefeld hatte.
Ich möchte dies nun dahingehend ändern indem man im vorhinein durch ein Dropdownmenü eine der genannten Kategorien auswählt und dann bei zum Beispiel der Artikelnummer ein Inputfeld und bei zum Beispiel Hersteller sich ein Inputfeld mit Datalist "öffnet".
Ein Inputfeld mit Datalist zu erstellen ist kein Problem. Die Problematik ist eher die Verknüpfung.
Ich hoffe es ist einigermaßen Verständlich.
Gruß Mostro
akzeptierte Antworten
Datalist mit vorherigem Dropdown verknüpfen
Auge
Bewertung: keine Bewertung
-
Dein Anliegen klingt als sei es sowohl serverseitig oder per Javascript lösbar.
Bisher war es so dass man für alle Sachen nur ein Eingabefeld hatte.
Aus Benutzersicht ist das wohl optimal. Warum willst Du das ändern?
-
Hallo
Dein Anliegen klingt als sei es sowohl serverseitig oder per Javascript lösbar.
Wenn man das Abschicken des Formulars nach der Auswahl der Kategorie „hinnimmt“, ja. Für den Anwender ist es wohl angenehmer, wenn die Auswahl der Produkte nach der Auswahl der Kategorie funktioniert, ohne die Seite zwischendurch abgeschickt und neugeladen haben zu müssen. Es wird damit auf eine Kombination von browser- und serverseitigen Techniken (JavaScript in Browser; PHP, Perl, Python oder sonstwas auf dem Server) hinauslaufen.
[edit] Es gibt auch rein clientseitige Lösungen.
- Packe alle Produkte in die Datalist der Produktauswahl.
- Schicke ein Array aller Produkte in für JS lesbarer Form mit, um nach der Auswahl der Kategorie die Datalist der Produktauswahl passend zu bestücken.
Beide Lösungen haben den Vorteil, nach dem Laden der Seite keine Kommunikation mit dem Server zu erfordern. Beide Lösungen haben den Nachteil, bei jedem Aufruf dieser Seite alle Daten mitschicken zu müssen.
[/edit]Bisher war es so dass man für alle Sachen nur ein Eingabefeld hatte.
Aus Benutzersicht ist das wohl optimal.
Kommt drauf an, wie viele Optionen sich aus den Kombinationen der Kategorien mit den Produkten ergeben.
Warum willst Du das ändern?
Es kann schon durchaus sinnvoll sein, durch eine Vorauswahl einer Kategorie den Umfang der sich aus der Auswahl ergebenden Produktliste zu begrenzen. Wie umfangreich die Produktliste ohne Vorauswahl und wie groß der sich daraus ergebende Vorteil der Übersichtlichkeit ist, wissen wir allerdings nicht,
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
Erstmal danke für die schnelle Antwort.
Für den Anwender ist es wohl angenehmer, wenn die Auswahl der Produkte nach der Auswahl der Kategorie funktioniert, ohne die Seite zwischendurch abgeschickt und neugeladen haben zu müssen.
So ist es. Die Übersicht gibt alle Stecker an, rund 600, und nicht jeder kennt die Hersteller oder weiß wie diese geschrieben werden daher die Datalist, bei der Artikelnummer ist es aber eher unpraktisch jeden Hersteller zu sehen bzw. jede Artikelnummer auszuählen. Dafür ist die Eingabe praktisch da niemand nach einer Artikelnummer sucht, wenn er diese nicht kennt.
Auf dem Server läuft PHP, wäre für mich auch die beste Lösung, da ich mich eher damit auseinander gesetzt habe als mit den restlichen.
Es wird damit auf eine Kombination von browser- und serverseitigen Techniken (JavaScript in Browser; PHP, Perl, Python oder sonstwas auf dem Server) hinauslaufen.
- Packe alle Produkte in die Datalist der Produktauswahl.
- Schicke ein Array aller Produkte in für JS lesbarer Form mit, um nach der Auswahl der Kategorie die Datalist der Produktauswahl passend zu bestücken.
Wie genau ist das gemeint, kenne mich nicht wirklich mit Javascript aus
Warum willst Du das ändern?
Wie Auge schon sagte, es wird erheblich einfacher und übersichtlicher
-
Hallo
Für den Anwender ist es wohl angenehmer, wenn die Auswahl der Produkte nach der Auswahl der Kategorie funktioniert, ohne die Seite zwischendurch abgeschickt und neugeladen haben zu müssen.
So ist es. Die Übersicht gibt alle Stecker an, rund 600, und nicht jeder kennt die Hersteller oder weiß wie diese geschrieben werden daher die Datalist, bei der Artikelnummer ist es aber eher unpraktisch jeden Hersteller zu sehen bzw. jede Artikelnummer auszuählen. Dafür ist die Eingabe praktisch da niemand nach einer Artikelnummer sucht, wenn er diese nicht kennt.
Auf dem Server läuft PHP, wäre für mich auch die beste Lösung, da ich mich eher damit auseinander gesetzt habe als mit den restlichen.
Ich habe (im folgenden zitiert) nur eine (mehr oder minder typische) Auswahl an serverseitigen Sprachen aufgelistet. Du wirst normalerweise nur eine Sprache benutzen.
Es wird damit auf eine Kombination von browser- und serverseitigen Techniken (JavaScript in Browser; PHP, Perl, Python oder sonstwas auf dem Server) hinauslaufen.
- Packe alle Produkte in die Datalist der Produktauswahl.
- Schicke ein Array aller Produkte in für JS lesbarer Form mit, um nach der Auswahl der Kategorie die Datalist der Produktauswahl passend zu bestücken. Wie genau ist das gemeint, kenne mich nicht wirklich mit Javascript aus
Fall 1
Die HTML-Ausgabe wird auf dem Server mit PHP zusammengebaut. Es wird eine Datalist mit allen 600 Steckern an das zugehörige Input-Element gehängt. Die Liste enthält jede mögliche Auswahl, ist aber entsprechend lang und wohl auch unübersichtlich. Hier ist nach der Auslieferung des HTML-Dokuments keine weitere Programmlogik involviert, aber schön ist anders.
Fall 2
Die HTML-Ausgabe enthält, wenn sie nach Aufruf an den Browser versendet wird, keine Datalist. Allerdings wird auf dem Server eine für JavaScript lesbare Liste aller 600 Stecker erzeugt und dem HTML-Dokument beigefügt (als per
scriptverlinkte JS-Datei oder als JS-Block hartkodiert im HTML-Dokument). Wenn der Besucher die Auswahl des Herstellers getroffen hat, wird mit JavaScript die Datalist mit der passenden Auswahl von Produkten erzeugt und an das zugehörige Input-Element gehängt.Fall 3
Die HTML-Ausgabe enthält, wenn sie nach Aufruf an den Browser versendet wird, keine Datalist. Wenn der Besucher die Auswahl des Herstellers getroffen hat, wird mit JavaScript eine Anfrage an den Webserver gestellt (Stichworte „Fetch-API“, „Ajax“), um sich von einem PHP-Skript die Liste der Produkte der ausgewählten Firma liefern zu lassen. Diese wird dann als Datalist an das zugehörige Input-Element gehängt.
Fall 4
Die HTML-Ausgabe enthält, wenn sie nach Aufruf an den Browser versendet wird, keine Datalist. Wenn der Besucher die Auswahl des Herstellers getroffen hat, wird das Formular an den Server abgeschickt, wo daraufhin an das Input-Element für die Produkte per PHP-Skript die Datalist angehängt wird.
Im Fall 4 wird nur PHP benötigt, aber das Formular muss zwischendurch halt auch abgesendet werden. Der Unterschied zwischen den Fällen 2 und 3, in denen (unter anderem) auf JavaScript gesetzt wird, ist der Zeitpunkt, wann die Liste der zur Herstellerauswahl passenden Produkte vom Server geholt wird und der Umfang der Liste und damit die Größe der Datenübertragung. Ansonsten gleichen sich diese beiden Fälle. Es wird eine nach Herstellern gefilterte Produktpalette bereitgestellt, die per JS ins Dokument eingebaut wird.
Nachteil der Technik in Fall 2 ist die Bereitstellung aller Produkte aller Hersteller bei Auslieferung des HTML-Dokuments, obwohl der Benutzer wahrscheinlich nur Ausschnitte der vollständigen Produktliste benötigt, Vorteil gegenüber Fall 3 und Fall 4 ist der Umstand, dass in diesen Fällen eine oder mehrere weitere Anfragen an den Webserver notwendig sind. Es ist abzuwägen, ob der Nachteil der größeren initialen Datenmenge in Fall 2 hinnehmbar ist, weil die für die Fälle 3 und 4 benötigte höhere Ausfallsicherheit in der Datenverbindung (Einkauf auf Reisen im „Zusammenspiel“ mit Funklöchern) nicht sichergestellt werden kann oder ob man den Kunden nach einem Funkloch den Hersteller ein zweites Mal auswählen lässt, dafür aber sein Datenkontingent schont.
Tschö, Auge
PS: edit Satzbau korrigiert
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett
-
-
Hallo
In dieser Übersicht kann man alle Steckerkontakte die vorhanden sind suchen. Es wird unterschieden in Artikelnummer, Hersteller, Herstellernummer und Produktfamilie.
Bisher war es so dass man für alle Sachen nur ein Eingabefeld hatte.
Ich möchte dies nun dahingehend ändern indem man im vorhinein durch ein Dropdownmenü eine der genannten Kategorien auswählt und dann bei zum Beispiel der Artikelnummer ein Inputfeld und bei zum Beispiel Hersteller sich ein Inputfeld mit Datalist "öffnet".
Ein Inputfeld mit Datalist zu erstellen ist kein Problem. Die Problematik ist eher die Verknüpfung.
Wie im anderen Ast angesprochen, gibt es mehrere Lösungsansätze. Wie fit bist du in JavaScript, wie fit in einer serverseitigen Programmiersprache? Wenn du mehr machen willst, als alle Produkte in ein Select oder die Datalist eines Inputs zu packen, wirst du eine Logik verpackt in einem Programm brauchen.
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
Javascript eher weniger fit... eher PHP
wie meinst du das mit der Logik?
-
Hallo
Javascript eher weniger fit... eher PHP
Aha.
wie meinst du das mit der Logik?
Die Programmlogik legt fest, was nach einer Auswahl zu geschehen hat (in deinem Fall also Produkte der passenden Kategorie bereitstellen), sie ermittelt, welche Produkte dies sind und stellt die Daten zu den Produkten schlussendlich für die Ausgabe im Browser bereit.
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
Also ist das ganze doch eher umfangreicher als Anfangs gedacht?
Gibt es da vielleicht doch eine einfachere Möglichkeit mit PHP oder habt ihr vielleicht einen ganz anderen Lösungsansatz statt mit datalist vielleicht auch Inputfeld mit dynamischen Dropdownlisten?
-
Hallo
Also ist das ganze doch eher umfangreicher als Anfangs gedacht?
Das ist keine Aufgabe, die man mit einem Fingerschnips erledigt. Es ist allerdings auch keine Raketenwissenschaft.
Gibt es da vielleicht doch eine einfachere Möglichkeit mit PHP …
Ich habe im Nachbarast eine rein PHP-basierte Lösung (Fall 4) skizziert.
… oder habt ihr vielleicht einen ganz anderen Lösungsansatz statt mit datalist vielleicht auch Inputfeld mit dynamischen Dropdownlisten?
Eine Datalist ist die Möglichkeit einer dynamischen Dropdownliste.
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
Danke dir damit komme ich gut weiter👍👍
beste Grüße Mostro
-
-
-
-
-
-
Hi,
Im Prinzip dasselbe wie verkettete Selects. Dafür gibt es ein Tutorial - bin grad am Smartphone, da sucht es sich schlecht - evtl. kann jemand anderes den verlinken.
cu,
Andreas a/k/a MudGuard-
Hallo Andreas,
Im Prinzip dasselbe wie verkettete Selects. Dafür gibt es ein Tutorial - bin grad am Smartphone, da sucht es sich schlecht - evtl. kann jemand anderes den verlinken.
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Formulare/Verkettete_Auswahllisten
Gruß
Jürgen
-