Auswahlliste sortieren

[MagicMike]

Hallo zusammen,

ich versuche mir gerade JavaScript beizubringen. Und zwar möchte ich einen kleinen Fahrrad Konfigurator bauen.
Dazu habe ich testweise zwei Objekte erstellt.

const fahrrad = [
  {
    typ: ["Ebike"],
    color: "blau",
    size: "28"
  },
  {
    typ: "Mountain",
    color: "grün",
    size: "29"
  }
];

Danach erstelle ich die Elemente und gebe die Objekte darin aus.

function giveType(fahrrad) {
  const container = document.getElementById("cont");
  const selectTyp = document.createElement("SELECT");
  selectTyp.setAttribute("id", "myTyp");
  container.appendChild(selectTyp);

  for (var biketyp in fahrrad) {
    var optionTyp = document.createElement("option");
    optionTyp.setAttribute("value", `${biketyp}`);
    optionTyp.text = `${fahrrad[biketyp].typ}`;
    selectTyp.appendChild(optionTyp);

  }

Wie gebe ich nun zum Ausgewählten typ, die passende color in einem option Element aus?

[Christian Marquardt]

Was ist ${biketyp} für eine Javascriptvariable/Typ?
Wo wird da was sortiert?
Des Weiteren hat ein Optionelement eben nur einen value und Text der innerhalb des Elements ausgegeben werden kann. Ggfl mit "innerhtml" zu setzen

[MagicMike]

Hallo Christian,

was du mit dem Typ meinst verstehe ich nicht ganz. Es handelt sich dabei ja nur um eine Referenzvariable, die nur den gefundene Wert zugewiesen bekommt.
Das mit dem sortieren habe ich falsch ausgedrückt. Wenn ich z. B. das Mountainbike in der "option" auswähle, möchte ich nur die Farbe und die Größe von dem jeweiligen Typen in einer neuen "option" angezeigt bekommen, um anschließend aus den Farben auswählen zu können.

[Christian Marquardt]

Verstehe ich nicht
Wenn du in einem Option Element den Typ hast dann musst du irgendwo ein weiteres select mit den Farben als Optionelement machen. Ein select kann nur eine Liste von Optionelemente enthalten, für deine 3 Typen oben (Typ Farbe Größe) brauchst du 3 selects

[MagicMike]

Genau. Diese weiteren selects möchte ich auch mit einer Schleife erstellen. Allerdings sollen nur die Farben und Größen ausgegeben werden, die zum Typen passen.

[Christian Marquardt]

Schreibe keinen Kommentar, sondern antworte hier.
Das wird so nicht gehen, da du ja vorher den select ja schon in das DOM setzt.
Also 3 mal den select einsetzen und je eine Schleife für die Option-Tag
Wenn nur die Farbe und Größe die zum Typ passen ausgegeben werden sollen muss dann in jeder Schleife vor Erstellung des Option-Tag der Typ geprüft werden

[MagicMike]

Danke für deine schnelle Antwort.

Wenn es so nicht geht, wie müsste ich es dann umsetzen?

[Christian Marquardt]

Habe ich doch geschrieben
- select mit Typ setzen
- Optionen setzen

- select mit Farbe setzen
- Optionen auf Typ prüfen und setzen

- select mit Größe setzen
- Optionen auf Typ prüfen und setzen

[MagicMike]

Vielen dank