Dropdown umsetzten

[Bernd]

Hallo,

wie kann ich am besten so ein Dropdown umsetzten:
https://www.hse24.de/c/mode/strickware/pullover-18101061/

Zu sehen wenn man auf der verlinkten Seite auf Preis kickt. Ob es responsive ist, ist mir in diesem Fall egal, da dieses nur für mein Backend genutzt werden soll und dieses rufe ich nicht über mein Handy auf.

Das Ziel was ich erreichen möchte ist folgendes:

Im Dropdown werden mehrere Bereiche aufgelistet, ich möchte gerne anklicken welche Werte ich davon dann auf der Seite sehen möchte.

[Camping_RIDER]

Aloha ;)

wie kann ich am besten so ein Dropdown umsetzten:
https://www.hse24.de/c/mode/strickware/pullover-18101061/

Zu sehen wenn man auf der verlinkten Seite auf Preis kickt. Ob es responsive ist, ist mir in diesem Fall egal, da dieses nur für mein Backend genutzt werden soll und dieses rufe ich nicht über mein Handy auf.

Entscheide dich mal. Am besten, aber nicht responsiv? 😂

Das Ziel was ich erreichen möchte ist folgendes:

Im Dropdown werden mehrere Bereiche aufgelistet, ich möchte gerne anklicken welche Werte ich davon dann auf der Seite sehen möchte.

Das ist ein Bereich der Seite, der bei Klick eingeblendet wird, und auf dem man Checkboxen anwählen kann, wobei die Auswahl ein Neuladen der Seite verursachen.

Wo ist dabei jetzt das Problem oder die Schwierigkeit?

Ich hoffe nicht, dass du erwartest, dass dir jemand hier eine fertige Lösung präsentiert - und erkenne gleichzeitig nicht, wo die Schwierigkeit bei diesem Problem steckt, wenns nicht um eine fertige Lösung geht.

Grüße,

RIDER

[ursus contionabundo]

Ich ... - und erkenne gleichzeitig nicht, wo die Schwierigkeit bei diesem Problem steckt, wenns nicht um eine fertige Lösung geht.

@Bernd

Unser zeltender Ritter hat das Wort "konkret" vergessen. Um nachvollziehbar zu beschreiben, was da alles geschieht, muss man ein Buch über HTML, CSS und JavaScript schreiben, dabei die serverseitige Verarbeitung anreisen. Da wäre es wirklich einfacher die fertige Lösung zu posten.

Die steht aber dort auch im Quelltext. Also: wo steckt steckt Dein konkretes Problem bei der Sache?

[Gunnar Bittersmann]

@@Bernd

wie kann ich am besten so ein Dropdown umsetzten:
https://www.hse24.de/c/mode/strickware/pullover-18101061/

„Am besten“ und „so ein Dropdown“ schließen einander aus.

Die scheinen ihren Kram nur an einige ganz spezielle Kunden verkaufen zu wollen. Tastaturbedienung unmöglich.

Unbedienbarer Scheiß – nicht nachmachen!

LLAP 🖖

[Bernd]

Moin,

Die scheinen ihren Kram nur an einige ganz spezielle Kunden verkaufen zu wollen. Tastaturbedienung unmöglich. Unbedienbarer Scheiß – nicht nachmachen!

nicht alles muss sich immer per Tastatur bedienbar sein? Vor allem wenn es sich nur um ein Backend handelt. Irgendwann muss man auch mal die Kirche im Dorf lassen.

[ursus contionabundo]

nicht alles muss sich immer per Tastatur bedienbar sein?

Im konkreten Fall wäre das aber leicht zu bewerkstelligen.

Vor allem wenn es sich nur um ein Backend handelt.

Wenn es nur für Dich ist - ok.

Das Prinzip des gezeigten ist, dass es einmal Elemente gibt, die man anklicken kann:

<button id="btn_prices" onclick="show_form('prices')">Preis</button>
<button id="btn_colors" onclick="show_form('colors')">Farben</button>
<button id="btn_close_all" onclick="show_form(false)">Alle schließen</button>

die lösen onclick ein Javascriptlein aus, welches ein bisher ausgeblendetes Formular einblendet (und ggf. andere ausblendet: )

Exemplarisch:

…
<form id="prices" style="display:none">
  # …
</form>
<form id="colors" style="display:none">
  # …
</form>
…

Der Rest ist grafischer Schnickschnack mit Positionierungs- und Rahmen- Tohuwabohu. Das Javascript könnte, in der Geschmacksrichtung "Vanilla", etwa so aussehen:

function show_form( id ) {
  var allForms = ['colors', 'prices'];
  //collectData( allForms );
  while ( f = allForms.shift() ) {
      oF = document.getElemementById( f );
      if ( 'block' == oF.style.display ) {
         //collectData( f );
      }
      if ( f == id ) {
          oF.style.display='block';
      } else {
          oF.style.display='none';
      }
  }
}

function collectDatafromForms( arForms ) {
  while ( f = arForms.shift() ) {
     oF = document.getElemementById( f );
     // work for me
  }
}

Das gänge freilich auch über Klassen.

Die Selektionen und das aktuell sichtbare Formular kann man jetzt in einer Session oder in einem Cookie speichern und und man sollte einen Plan haben, ob man beim Wechsel der Sichtbarkeit der Formulare ggf. einen submit() des bisher sichtbaren Teil-Formulars auslöst und was collectData() wohl erledigen sollte - und ob man das nicht doch besser hinbekommt als die von Dir gezeigte Seite, die, wie Gunnar schon "sagt", es aber nur an dem einem Punkt festmacht, "bei weitem nicht ideal"(¹) ist. Buttons, sogar Links z.B. wären mit der Tastatur bedienbar. Der Rest ist CSS.

---

¹) Manche nennen sowas mit einiger Berechtigung "Mist".

[Gunnar Bittersmann]

@@ursus contionabundo

<form id="prices" style="display:none">

      if ( f == id ) {
          oF.style.display='block';
      } else {
          oF.style.display='none';
      }

Das gänge freilich auch über Klassen.

Und freilicher über hidden-Attribute:

<form id="prices" hidden="">

		oF.hidden = (f !== id);

LLAP 🖖

[ursus contionabundo]

Und freilicher über hidden-Attribute:

Danke.

("Moderne-Zeiten"-grummel)